Se Les Acab\u00f3 Su Gordito \u00b7 Cl\u00ednica Bari\u00e1trica<\/title>\n\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Lexend:wght@300;400;500;600;700;800;900&family=Literata:ital,wght@0,400;0,600;0,700;1,400&display=swap\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\n\n <style>\n :root {\n --color-01: #f3d8d1;\n --color-02: #e8afa7;\n --color-03: #002842;\n --color-04: #d2a750;\n --color-05: #b37e34;\n --color-06: #245080;\n --font-heading: 'Lexend', sans-serif;\n --font-body: 'Literata', serif;\n --blanco: #ffffff;\n --negro: #000000;\n --mx: 50%;\n --my: 50%;\n }\n\n * { margin: 0; padding: 0; box-sizing: border-box; }\n body { font-family: var(--font-body); background: var(--color-01); overflow-x: hidden; }\n\n \/* ============================================\n HERO \u2014 VIDEO DE FONDO A PANTALLA COMPLETA\n ============================================ *\/\n .hero {\n position: relative;\n min-height: 100vh;\n width: 100%;\n display: flex;\n align-items: center;\n overflow: hidden;\n background: var(--color-03);\n }\n\n .hero-video-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: hidden; }\n .hero-video-bg video {\n position: absolute; top: 50%; left: 50%; width: 100%; height: 100%;\n object-fit: cover;\n transform: translate(-50%, -50%) scale(1.1);\n animation: kenBurns 24s ease-in-out infinite alternate;\n }\n @keyframes kenBurns {\n 0% { transform: translate(-50%, -50%) scale(1.1); }\n 100% { transform: translate(-52%, -48%) scale(1.22); }\n }\n\n .hero-scrim {\n position: absolute; inset: 0; z-index: 1;\n background:\n linear-gradient(100deg, rgba(0,40,66,0.94) 0%, rgba(0,40,66,0.78) 32%, rgba(0,40,66,0.42) 58%, rgba(0,40,66,0.12) 78%),\n linear-gradient(0deg, rgba(0,40,66,0.55) 0%, rgba(0,40,66,0) 30%);\n }\n\n .hero-curtain {\n position: absolute; inset: 0; z-index: 4;\n background: var(--color-03);\n animation: curtainOpen 1.3s cubic-bezier(0.65, 0, 0.35, 1) forwards 0.1s;\n pointer-events: none;\n }\n @keyframes curtainOpen { to { opacity: 0; visibility: hidden; } }\n\n .hero-mouse-glow {\n position: absolute; inset: 0; z-index: 2; pointer-events: none;\n background: radial-gradient(520px circle at var(--mx) var(--my), rgba(210, 167, 80, 0.22), transparent 70%);\n mix-blend-mode: screen;\n }\n\n .hero-light-sweep {\n position: absolute; inset: -20%; z-index: 2; pointer-events: none;\n background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.06) 48%, rgba(210, 167, 80, 0.1) 50%, transparent 58%);\n animation: sweep 9s ease-in-out infinite;\n }\n @keyframes sweep { 0%, 100% { transform: translateX(-15%); } 50% { transform: translateX(15%); } }\n\n .hero-fade-out {\n position: absolute; left: 0; right: 0; bottom: 0; height: 14%; z-index: 3;\n background: linear-gradient(180deg, transparent, var(--color-01));\n pointer-events: none;\n }\n\n .hero-container {\n position: relative; z-index: 5;\n max-width: 1300px; width: 100%;\n margin: 0 auto;\n padding: 2rem 6%;\n }\n\n \/* ============================================\n CONTENIDO\n ============================================ *\/\n .hero-content { display: flex; flex-direction: column; gap: 24px; max-width: 780px; }\n\n \/* --- T\u00edtulo vivo --- *\/\n .hero-title {\n font-family: var(--font-heading);\n font-size: clamp(2.8rem, 6vw, 4.6rem);\n font-weight: 900; line-height: 1.05; letter-spacing: -2px;\n color: var(--blanco);\n text-shadow: 0 4px 30px rgba(0,0,0,0.25);\n }\n .title-line { display: block; overflow: hidden; }\n .letter {\n display: inline-block; opacity: 0;\n transform: translateY(46px) rotateZ(6deg);\n animation: letterIn 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;\n will-change: transform, opacity;\n }\n @keyframes letterIn { to { opacity: 1; transform: translateY(0) rotateZ(0); } }\n\n .highlight-wrap { display: inline-block; }\n .highlight {\n position: relative; display: inline-block;\n background: linear-gradient(100deg, var(--color-05), var(--color-04) 35%, var(--color-02) 60%, var(--color-04) 85%);\n background-size: 220% auto;\n -webkit-background-clip: text; background-clip: text; color: transparent;\n cursor: default;\n animation:\n gordoJelly 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 1.55s both,\n simmerMove 5s linear infinite 2.45s,\n breathe 3.6s ease-in-out infinite 2.45s;\n }\n .highlight.jiggle { animation: gordoJelly 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both, shimmerMove 5s linear infinite, breathe 3.6s ease-in-out infinite; }\n .highlight::after {\n content: ''; position: absolute; left: 2%; bottom: 6px; width: 96%; height: 10px;\n background: rgba(210, 167, 80, 0.35); border-radius: 10px; z-index: -1;\n transform: skewX(-8deg) scaleX(0); transform-origin: left;\n animation: underlineGrow 0.6s ease forwards 2.1s;\n }\n @keyframes underlineGrow { to { transform: skewX(-8deg) scaleX(1); } }\n @keyframes gordoJelly {\n 0% { transform: scale(1.5, 0.6) rotate(-4deg); opacity: 0; }\n 45% { transform: scale(0.85, 1.18) rotate(3deg); opacity: 1; }\n 70% { transform: scale(1.08, 0.94) rotate(-2deg); }\n 85% { transform: scale(0.97, 1.03) rotate(1deg); }\n 100% { transform: scale(1) rotate(0); }\n }\n @keyframes shimmerMove { to { background-position: -220% center; } }\n @keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }\n\n \/* --- Especialidad --- *\/\n .hero-specialty {\n display: inline-flex; align-items: center; gap: 10px;\n font-family: var(--font-heading); font-weight: 700; font-size: clamp(0.95rem, 1.4vw, 1.15rem);\n letter-spacing: 0.5px;\n background: linear-gradient(100deg, var(--color-04) 0%, var(--color-02) 45%, var(--color-04) 100%);\n background-size: 220% auto;\n -webkit-background-clip: text; background-clip: text; color: transparent;\n position: relative; width: fit-content; padding-bottom: 8px;\n opacity: 0; transform: translateY(22px);\n animation: slideUp 0.8s ease 1.05s forwards, specialtyShimmer 4.5s linear infinite 2s;\n }\n .hero-specialty .dot {\n width: 7px; height: 7px; min-width: 7px; border-radius: 50%;\n background: var(--color-04);\n box-shadow: 0 0 10px 2px rgba(210, 167, 80, 0.6);\n animation: pulseDot 2s infinite 1.9s;\n }\n .hero-specialty::after {\n content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;\n background: linear-gradient(90deg, var(--color-04), var(--color-02), transparent);\n transform-origin: left; transform: scaleX(0);\n animation: underlineGrow2 0.9s cubic-bezier(0.65,0,0.35,1) forwards 1.6s;\n }\n @keyframes specialtyShimmer { to { background-position: -220% center; } }\n @keyframes underlineGrow2 { to { transform: scaleX(1); } }\n @keyframes pulseDot { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 1; transform: scale(1.9); } }\n\n .hero-sub {\n font-family: var(--font-heading);\n font-size: clamp(1rem, 1.15vw, 1.15rem);\n font-weight: 300; color: var(--color-01);\n line-height: 1.7; max-width: 580px;\n text-shadow: 0 2px 16px rgba(0,0,0,0.35);\n animation: slideUp 0.8s ease 1.75s forwards; opacity: 0; transform: translateY(24px);\n }\n\n \/* =======================================================\n NUEVAS CARACTER\u00cdSTICAS \u2014 TOTALMENTE EN L\u00cdNEA Y LIMPIO\n ======================================================= *\/\n .hero-features-inline {\n display: flex; \n align-items: center; \n flex-wrap: wrap; \n gap: 16px;\n width: 100%;\n padding: 0;\n background: none;\n backdrop-filter: none;\n -webkit-backdrop-filter: none;\n border: none;\n box-shadow: none;\n opacity: 0; transform: translateY(22px);\n animation: slideUp 0.8s ease 2.05s forwards;\n }\n .hero-features-inline .feat {\n font-family: var(--font-heading); \n font-weight: 500; \n font-size: clamp(0.9rem, 1.2vw, 1.05rem);\n color: var(--color-01);\n transition: color 0.3s ease;\n cursor: default;\n }\n .hero-features-inline .feat:hover { color: var(--blanco); }\n .hero-features-inline .feat-divider { \n width: 6px; \n height: 6px; \n border-radius: 50%;\n background: var(--color-04); \n flex: none; \n }\n\n .hero-actions {\n display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 12px;\n animation: slideUp 0.8s ease 2.4s forwards; opacity: 0; transform: translateY(24px);\n }\n\n \/* --- CTA de WhatsApp (Limpio, sin rayas, hover blanco) --- *\/\n .btn-primary {\n display: inline-flex; align-items: center; gap: 12px;\n font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem;\n letter-spacing: 0.5px;\n padding: 16px 38px;\n background: linear-gradient(135deg, var(--color-04), var(--color-05));\n color: var(--blanco); text-decoration: none !important;\n border: none; border-radius: 60px; cursor: pointer;\n transition: background 0.3s ease, color 0.3s ease, transform 0.15s ease-out;\n position: relative;\n }\n .btn-primary:hover { \n background: var(--blanco); \n color: var(--negro);\n }\n .btn-primary:focus-visible { outline: 3px solid var(--color-01); outline-offset: 4px; }\n .btn-primary .fa-whatsapp { font-size: 1.15rem; }\n .btn-primary .arrow { transition: transform 0.3s ease; }\n .btn-primary:hover .arrow { transform: translateX(6px); }\n\n \/* --- Cintas m\u00e9tricas flotantes --- *\/\n .tape-accent { position: absolute; z-index: 3; pointer-events: none; filter: drop-shadow(0 10px 24px rgba(0,0,0,0.3)); opacity: 0; transition: transform 0.3s ease-out; }\n .tape-accent.top { top: 6%; right: 7%; width: 130px; animation: fadeIn 1s ease forwards 2.6s, floatTapeV 5s ease-in-out infinite 3s; }\n .tape-accent.bottom { bottom: 16%; right: 15%; width: 150px; animation: fadeIn 1s ease forwards 2.8s, floatTapeH 4.5s ease-in-out infinite 3.2s; }\n @keyframes fadeIn { to { opacity: 0.9; } }\n @keyframes floatTapeV { 0%, 100% { transform: translateY(0) rotate(5deg); } 50% { transform: translateY(-14px) rotate(-4deg); } }\n @keyframes floatTapeH { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(3deg); } }\n .tape-accent img { width: 100%; height: auto; display: block; }\n\n @keyframes slideUp { to { opacity: 1; transform: translateY(0); } }\n\n .scroll-indicator {\n position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 5;\n display: flex; flex-direction: column; align-items: center; gap: 4px;\n color: rgba(255, 255, 255, 0.55);\n font-family: var(--font-heading); font-size: 0.45rem; letter-spacing: 3px; text-transform: uppercase;\n animation: fadeUp 1s ease 2.9s forwards, bounceDown 2.5s infinite 3.4s;\n opacity: 0;\n }\n .scroll-indicator .line { width: 1px; height: 30px; background: linear-gradient(180deg, rgba(255,255,255,0.5), transparent); position: relative; }\n .scroll-indicator .line::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--color-04); animation: scrollLine 2s infinite; opacity: 0.7; }\n @keyframes scrollLine { 0% { transform: translateY(0); opacity: 0.7; } 50% { opacity: 1; } 100% { transform: translateY(30px); opacity: 0; } }\n @keyframes bounceDown { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(6px); } }\n @keyframes fadeUp { to { opacity: 1; transform: translateX(-50%) translateY(0); } }\n\n @media (prefers-reduced-motion: reduce) {\n *, *::before, *::after {\n animation-duration: 0.001ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.001ms !important;\n scroll-behavior: auto !important;\n }\n }\n\n @media (max-width: 1024px) {\n .hero-container { padding: 2rem 6%; }\n .hero-content { max-width: 100%; }\n .hero-sub { max-width: 100%; }\n .tape-accent.top { top: 5%; right: 4%; width: 100px; }\n .tape-accent.bottom { display: none; }\n .hero-scrim { background: linear-gradient(180deg, rgba(0,40,66,0.55) 0%, rgba(0,40,66,0.82) 55%, rgba(0,40,66,0.9) 100%); }\n }\n\n \/* Celular optimizado: Centrado y en lista *\/\n @media (max-width: 768px) {\n .hero-container { padding: 3rem 5%; }\n .hero-content { align-items: center; text-align: center; }\n .hero-title { font-size: clamp(2.2rem, 9vw, 3rem); }\n .hero-specialty { justify-content: center; margin: 0 auto; }\n \n \/* En m\u00f3vil se listan uno debajo de otro perfectamente centrados *\/\n .hero-features-inline { \n flex-direction: column; \n align-items: center; \n text-align: center;\n gap: 12px; \n width: 100%;\n }\n .hero-features-inline .feat-divider { display: none; } \/* Quitamos c\u00edrculos divisores en m\u00f3vil *\/\n \n .btn-primary { width: 100%; justify-content: center; }\n .hero-actions { flex-direction: column; width: 100%; align-items: center; }\n .tape-accent.top { width: 80px; top: 4%; right: 4%; }\n .scroll-indicator { display: none; }\n }\n\n @media (max-width: 480px) {\n .hero-title { font-size: 1.9rem; }\n .hero-specialty { font-size: 0.85rem; }\n }\n <\/style>\n<\/head>\n<body>\n\n <section class=\"hero\">\n <div class=\"hero-curtain\"><\/div>\n\n <div class=\"hero-video-bg\">\n <video autoplay loop muted playsinline preload=\"auto\">\n <source src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/0_Active_Outdoor_1280x720.mp4\" type=\"video\/mp4\">\n <\/video>\n <\/div>\n\n <div class=\"hero-scrim\"><\/div>\n <div class=\"hero-light-sweep\"><\/div>\n <div class=\"hero-mouse-glow\"><\/div>\n <div class=\"hero-fade-out\"><\/div>\n\n <div class=\"hero-container\">\n <div class=\"hero-content\">\n\n <h1 class=\"hero-title\">\n <span class=\"title-line\">Se les acab\u00f3 su<\/span>\n <span class=\"highlight-wrap\"><span class=\"highlight\">gordito<\/span><\/span>\n <\/h1>\n\n <div class=\"hero-specialty\">\n <span class=\"dot\"><\/span>\n Cl\u00ednica especialista en nutrici\u00f3n y bariatr\u00eda en la CDMX\n <\/div>\n\n <p class=\"hero-sub\">\n Aqu\u00ed encontrar\u00e1s un equipo que te escucha, te orienta y dise\u00f1a un plan de acuerdo con tus necesidades\n <\/p>\n\n \n <div class=\"hero-features-inline\">\n <span class=\"feat\">Nutrici\u00f3n para bajar de peso<\/span>\n <span class=\"feat-divider\"><\/span>\n <span class=\"feat\">Tratamientos m\u00e9dicos para sobrepeso y obesidad<\/span>\n <span class=\"feat-divider\"><\/span>\n <span class=\"feat\">Resultados reales<\/span>\n <\/div>\n\n <div class=\"hero-actions\">\n <a class=\"btn-primary\" id=\"ctaBtn\"\n href=\"https:\/\/wa.link\/zvs595\"\n target=\"_blank\" rel=\"noopener noreferrer\">\n <i class=\"fab fa-whatsapp\"><\/i>\n Agendar una cita\n <span class=\"arrow\">\u2192<\/span>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"scroll-indicator\">\n <span>Scroll<\/span>\n <div class=\"line\"><\/div>\n <\/div>\n <\/section>\n\n <script>\n function splitLetters(el) {\n const text = el.textContent;\n el.setAttribute('aria-label', text);\n el.textContent = '';\n [...text].forEach((ch, i) => {\n const span = document.createElement('span');\n span.className = 'letter';\n span.textContent = ch === ' ' ? '\\u00A0' : ch;\n span.style.animationDelay = (0.9 + i * 0.032) + 's';\n el.appendChild(span);\n });\n }\n document.querySelectorAll('.title-line').forEach(splitLetters);\n\n document.addEventListener('DOMContentLoaded', () => {\n const hero = document.querySelector('.hero');\n const tapeTop = document.querySelector('.tape-accent.top');\n const tapeBottom = document.querySelector('.tape-accent.bottom');\n const highlight = document.querySelector('.highlight');\n const ctaBtn = document.getElementById('ctaBtn');\n\n hero?.addEventListener('mousemove', (e) => {\n const r = hero.getBoundingClientRect();\n hero.style.setProperty('--mx', (e.clientX - r.left) + 'px');\n hero.style.setProperty('--my', (e.clientY - r.top) + 'px');\n\n const relX = (e.clientX \/ window.innerWidth - 0.5);\n const relY = (e.clientY \/ window.innerHeight - 0.5);\n if (tapeTop) tapeTop.style.transform = `translate(${relX * 18}px, ${relY * 14}px)`;\n if (tapeBottom) tapeBottom.style.transform = `translate(${relX * -18}px, ${relY * -14}px)`;\n });\n\n highlight?.addEventListener('mouseenter', () => {\n highlight.classList.remove('jiggle');\n void highlight.offsetWidth;\n highlight.classList.add('jiggle');\n });\n\n ctaBtn?.addEventListener('mousemove', (e) => {\n const r = ctaBtn.getBoundingClientRect();\n const x = e.clientX - (r.left + r.width \/ 2);\n const y = e.clientY - (r.top + r.height \/ 2);\n ctaBtn.style.transform = `translate(${x * 0.15}px, ${y * 0.15}px) scale(1.02)`;\n });\n ctaBtn?.addEventListener('mouseleave', () => { ctaBtn.style.transform = ''; });\n });\n <\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c8c099c e-con-full e-flex e-con e-parent\" data-id=\"c8c099c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a2f52a4 elementor-widget elementor-widget-html\" data-id=\"a2f52a4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n<div class=\"tape-ticker-wrapper\">\n <div class=\"tape-ticker-container\">\n \n <div class=\"tape-ticker-track\">\n <div class=\"tape-item\">\n <span>Agenda tu consulta hoy por $1,000<\/span>\n <i class=\"fas fa-star-of-life badge-icon\"><\/i>\n <\/div>\n <div class=\"tape-item\">\n <span>Agenda tu consulta hoy por $1,000<\/span>\n <i class=\"fas fa-star-of-life badge-icon\"><\/i>\n <\/div>\n <div class=\"tape-item\">\n <span>Agenda tu consulta hoy por $1,000<\/span>\n <i class=\"fas fa-star-of-life badge-icon\"><\/i>\n <\/div>\n <div class=\"tape-item\">\n <span>Agenda tu consulta hoy por $1,000<\/span>\n <i class=\"fas fa-star-of-life badge-icon\"><\/i>\n <\/div>\n <div class=\"tape-item\">\n <span>Agenda tu consulta hoy por $1,000<\/span>\n <i class=\"fas fa-star-of-life badge-icon\"><\/i>\n <\/div>\n <div class=\"tape-item\">\n <span>Agenda tu consulta hoy por $1,000<\/span>\n <i class=\"fas fa-star-of-life badge-icon\"><\/i>\n <\/div>\n <\/div>\n \n \n <div class=\"tape-ticker-track\" aria-hidden=\"true\">\n <div class=\"tape-item\">\n <span>Agenda tu consulta hoy por $1,000<\/span>\n <i class=\"fas fa-star-of-life badge-icon\"><\/i>\n <\/div>\n <div class=\"tape-item\">\n <span>Agenda tu consulta hoy por $1,000<\/span>\n <i class=\"fas fa-star-of-life badge-icon\"><\/i>\n <\/div>\n <div class=\"tape-item\">\n <span>Agenda tu consulta hoy por $1,000<\/span>\n <i class=\"fas fa-star-of-life badge-icon\"><\/i>\n <\/div>\n <div class=\"tape-item\">\n <span>Agenda tu consulta hoy por $1,000<\/span>\n <i class=\"fas fa-star-of-life badge-icon\"><\/i>\n <\/div>\n <div class=\"tape-item\">\n <span>Agenda tu consulta hoy por $1,000<\/span>\n <i class=\"fas fa-star-of-life badge-icon\"><\/i>\n <\/div>\n <div class=\"tape-item\">\n <span>Agenda tu consulta hoy por $1,000<\/span>\n <i class=\"fas fa-star-of-life badge-icon\"><\/i>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<style>\n \/* Estilos del cintillo de cinta m\u00e9trica *\/\n .tape-ticker-wrapper {\n width: 100%;\n background: #002842; \/* Fondo oscuro de contraste para que resalte la cinta *\/\n padding: 25px 0;\n overflow: hidden;\n position: relative;\n display: flex;\n align-items: center;\n }\n\n .tape-ticker-container {\n width: 100%;\n background-color: #d2a750; \/* El color dorado\/amarillo base de tu paleta *\/\n height: 60px;\n position: relative;\n display: flex;\n align-items: center;\n overflow: hidden;\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);\n transform: rotate(-1.5deg) scale(1.02); \/* Ligera inclinaci\u00f3n para darle un toque m\u00e1s de dise\u00f1o org\u00e1nico *\/\n z-index: 10;\n }\n\n \/* Generaci\u00f3n de las l\u00edneas milim\u00e9tricas de la cinta m\u00e9trica en los bordes superior e inferior *\/\n .tape-ticker-container::before {\n content: '';\n position: absolute;\n inset: 0;\n \/* Genera las marcas negras alternando l\u00edneas largas y cortas usando CSS lineal *\/\n background-image: \n linear-gradient(90deg, #002842 2px, transparent 2px),\n linear-gradient(90deg, #002842 1px, transparent 1px);\n background-size: 40px 100%, 8px 100%;\n \/* Ajusta las marcas arriba (15px de alto) y abajo (15px de alto invertido) *\/\n mask-image: linear-gradient(to bottom, #fff 15px, transparent 15px, transparent calc(100% - 15px), #fff calc(100% - 15px));\n -webkit-mask-image: linear-gradient(to bottom, #fff 15px, transparent 15px, transparent calc(100% - 15px), #fff calc(100% - 15px));\n opacity: 0.75;\n z-index: 1;\n pointer-events: none;\n }\n\n \/* Contenedor animado infinito *\/\n .tape-ticker-track {\n display: flex;\n align-items: center;\n white-space: nowrap;\n animation: tapeMarquee 22s linear infinite;\n will-change: transform;\n }\n\n \/* Pausa sutil la animaci\u00f3n al pasar el mouse por encima para que sea interactivo *\/\n .tape-ticker-container:hover .tape-ticker-track {\n animation-play-state: paused;\n }\n\n \/* Cada bloque de texto individual dentro de la cinta *\/\n .tape-item {\n display: inline-flex;\n align-items: center;\n font-family: 'Lexend', sans-serif;\n font-weight: 800;\n font-size: 1.3rem;\n color: #002842; \/* Tu azul oscuro para m\u00e1xima legibilidad *\/\n padding: 0 40px;\n }\n\n \/* Icono separador din\u00e1mico entre repeticiones del texto *\/\n .badge-icon {\n margin-left: 40px;\n font-size: 1rem;\n color: #b37e34;\n animation: rotateIcon 6s linear infinite;\n }\n\n \/* Animaci\u00f3n fluida de desplazamiento horizontal *\/\n @keyframes tapeMarquee {\n 0% { transform: translateX(0%); }\n 100% { transform: translateX(-100%); }\n }\n\n \/* Rotaci\u00f3n constante para las estrellitas de separaci\u00f3n *\/\n @keyframes rotateIcon {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n\n \/* Ajustes espec\u00edficos para m\u00f3viles *\/\n @media (max-width: 768px) {\n .tape-ticker-container {\n height: 50px;\n transform: rotate(-1deg) scale(1.01); \/* Menos inclinaci\u00f3n en pantallas peque\u00f1as *\/\n }\n .tape-item {\n font-size: 1.05rem;\n padding: 0 25px;\n }\n .badge-icon {\n margin-left: 25px;\n font-size: 0.85rem;\n }\n .tape-ticker-container::before {\n background-size: 30px 100%, 6px 100%;\n mask-image: linear-gradient(to bottom, #fff 10px, transparent 10px, transparent calc(100% - 10px), #fff calc(100% - 10px));\n -webkit-mask-image: linear-gradient(to bottom, #fff 10px, transparent 10px, transparent calc(100% - 10px), #fff calc(100% - 10px));\n }\n }\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-143368a e-con-full e-flex e-con e-parent\" data-id=\"143368a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1a53db0 elementor-widget elementor-widget-html\" data-id=\"1a53db0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"why-section-container\">\n <style>\n .why-section-container {\n --why-color-01: #f3d8d1;\n --why-color-02: #e8afa7;\n --why-color-03: #002842;\n --why-color-04: #d2a750;\n --why-color-05: #b37e34;\n --why-color-06: #245080;\n --why-font-heading: 'Lexend', sans-serif;\n --why-font-body: 'Literata', serif;\n --why-blanco: #ffffff;\n --why-mx: 50%;\n --why-my: 50%;\n \n position: relative;\n padding: clamp(80px, 1vw, 150px) 6%;\n background: var(--why-color-01);\n overflow: hidden;\n width: 100%;\n font-family: var(--why-font-body);\n }\n\n \/* --- Glow c\u00e1lido que sigue al cursor --- *\/\n .why-section-container .why-glow {\n position: absolute; inset: 0; z-index: 0; pointer-events: none;\n background: radial-gradient(600px circle at var(--why-mx) var(--why-my), rgba(210, 167, 80, 0.12), transparent 65%);\n }\n\n \/* --- Formas decorativas flotantes --- *\/\n .why-section-container .why-blob { position: absolute; border-radius: 50%; filter: blur(2px); z-index: 0; pointer-events: none; }\n .why-section-container .why-blob.b1 { width: 380px; height: 380px; background: rgba(36, 80, 128, 0.06); top: -10%; right: -8%; animation: whyDrift 16s ease-in-out infinite; }\n .why-section-container .why-blob.b2 { width: 220px; height: 220px; background: rgba(232, 175, 167, 0.35); bottom: 4%; left: -6%; animation: whyDrift 13s ease-in-out infinite reverse; }\n .why-section-container .why-blob.b3 { width: 90px; height: 90px; background: rgba(210, 167, 80, 0.18); top: 18%; left: 8%; animation: whyDrift 9s ease-in-out infinite; }\n @keyframes whyDrift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(18px, -22px) scale(1.06); } }\n\n \/* --- Numeral gigante de fondo --- *\/\n .why-section-container .why-watermark {\n position: absolute; z-index: 0; pointer-events: none;\n top: -4%; left: 2%;\n font-family: var(--why-font-heading); font-weight: 900;\n font-size: clamp(9rem, 22vw, 20rem);\n color: rgba(36, 80, 128, 0.04);\n line-height: 1; user-select: none;\n animation: whyDrift 20s ease-in-out infinite;\n }\n\n .why-section-container .why-container { position: relative; z-index: 2; max-width: 1220px; margin: 0 auto; }\n \n \/* --- Encabezado CENTRADO --- *\/\n .why-section-container .why-header { max-width: 660px; margin-bottom: clamp(56px, 8vw, 88px); text-align: center; margin-left: auto; margin-right: auto;}\n\n .why-section-container .why-title {\n font-family: var(--why-font-heading); font-weight: 900;\n font-size: clamp(2.1rem, 4.4vw, 3.3rem); line-height: 1.12;\n letter-spacing: -1.2px; color: var(--why-color-03);\n margin: 0;\n }\n .why-section-container .why-title .word { display: inline-block; opacity: 0; transform: translateY(28px) rotateZ(3deg); }\n .why-section-container .why-title.in-view .word { animation: whyRevealUp 0.7s cubic-bezier(0.2,0.8,0.2,1) forwards; }\n\n .why-section-container .why-title .accent {\n position: relative; display: inline-block;\n background: linear-gradient(100deg, var(--why-color-05), var(--why-color-04) 40%, var(--why-color-02) 65%, var(--why-color-04) 90%);\n background-size: 220% auto;\n -webkit-background-clip: text; background-clip: text; color: transparent;\n }\n .why-section-container .why-title.in-view .accent { animation: whyRevealUp 0.7s cubic-bezier(0.2,0.8,0.2,1) forwards, whyShimmer 5s linear infinite 1s; }\n @keyframes whyShimmer { to { background-position: -220% center; } }\n\n .why-section-container .why-subtitle {\n font-family: var(--why-font-heading); font-weight: 300;\n font-size: clamp(1rem, 1.3vw, 1.15rem); color: var(--why-color-06);\n line-height: 1.75; margin-top: 20px; max-width: 520px;\n opacity: 0; transform: translateY(18px);\n margin-left: auto; margin-right: auto;\n }\n .why-section-container .why-subtitle.in-view { animation: whyRevealUp 0.75s ease forwards 0.15s; }\n\n @keyframes whyRevealUp { to { opacity: 1; transform: translateY(0) rotateZ(0); } }\n\n .why-section-container .why-content {\n display: grid;\n grid-template-columns: 1.1fr 0.9fr; \/* Ajustamos para dar m\u00e1s peso a la imagen *\/\n gap: clamp(40px, 6vw, 90px);\n align-items: center;\n }\n\n \/* --- VISUAL: imagen --- *\/\n .why-section-container .why-visual {\n position: relative;\n width: 100%; \n max-width: 540px; \/* Imagen m\u00e1s grande *\/\n margin: 0 auto;\n opacity: 0; transform: translateY(24px);\n }\n .why-section-container .why-visual.in-view { animation: whyRevealUp 0.8s cubic-bezier(0.2,0.8,0.2,1) forwards; }\n\n .why-section-container .why-visual::before {\n content: '';\n position: absolute;\n inset: 4% -12% -12% 4%;\n background: radial-gradient(circle at 30% 25%, rgba(210, 167, 80, 0.35), rgba(232, 175, 167, 0.45) 55%, transparent 78%);\n filter: blur(36px);\n border-radius: 50%;\n z-index: 0;\n }\n\n \/* Modificado: Ahora parpadea\/pulsa suavemente en lugar de girar *\/\n .why-section-container .why-visual .deco-ring {\n position: absolute; z-index: 1;\n width: 110%; height: 110%;\n top: -5%; left: -5%;\n border-radius: 50%;\n border: 1.5px dashed rgba(210, 167, 80, 0.6);\n animation: whyPulseRing 4s ease-in-out infinite;\n pointer-events: none;\n }\n @keyframes whyPulseRing {\n 0%, 100% { transform: scale(1); opacity: 0.4; }\n 50% { transform: scale(1.03); opacity: 0.95; }\n }\n\n .why-section-container .image-frame {\n position: relative; z-index: 2;\n border-radius: 24px;\n transform: perspective(1000px);\n transition: transform 0.25s ease-out;\n will-change: transform;\n }\n \n \/* Quitamos la animaci\u00f3n kenburns para que el PNG recortado no haga cosas raras *\/\n .why-section-container .image-frame img {\n width: 100%; height: auto; display: block;\n border: none;\n transition: transform 0.3s ease-out;\n }\n\n .why-section-container .visual-tape {\n position: absolute; z-index: 4; top: -18px; right: -20px; width: 78px;\n filter: drop-shadow(0 8px 18px rgba(0,0,0,0.2));\n opacity: 0;\n animation: whyTapeFade 0.7s ease forwards 1.1s, whyTapeFloat 4.2s ease-in-out infinite 1.8s;\n }\n .why-section-container .visual-tape img { width: 100%; height: auto; display: block; border: none;}\n @keyframes whyTapeFade { to { opacity: 0.95; } }\n @keyframes whyTapeFloat { 0%, 100% { transform: translateY(0) rotate(6deg); } 50% { transform: translateY(-10px) rotate(-4deg); } }\n\n \/* --- BENEFICIOS --- *\/\n .why-section-container .why-benefits { position: relative; display: flex; flex-direction: column; padding: 0; margin: 0; list-style: none;}\n\n .why-section-container .why-benefits::before {\n content: '';\n position: absolute; left: 27px; top: 30px; bottom: 30px; width: 2px;\n background: linear-gradient(180deg, var(--why-color-04), rgba(210, 167, 80, 0.15));\n opacity: 0; transform: scaleY(0); transform-origin: top;\n }\n .why-section-container .why-benefits.in-view::before { opacity: 1; animation: whyLineGrow 1.1s cubic-bezier(0.65,0,0.35,1) forwards 0.2s; }\n @keyframes whyLineGrow { to { transform: scaleY(1); } }\n\n .why-section-container .benefit-row {\n position: relative;\n display: flex; align-items: center; gap: 22px;\n padding: 20px 22px 20px 0;\n border-radius: 18px;\n opacity: 0; transform: translateX(36px);\n transition: background 0.35s ease, transform 0.35s cubic-bezier(0.2,0.8,0.2,1);\n cursor: default;\n }\n .why-section-container .why-benefits.in-view .benefit-row { animation: whyRowIn 0.75s cubic-bezier(0.2,0.8,0.2,1) forwards; }\n .why-section-container .why-benefits.in-view .benefit-row:nth-child(1) { animation-delay: 0.1s; }\n .why-section-container .why-benefits.in-view .benefit-row:nth-child(2) { animation-delay: 0.22s; }\n .why-section-container .why-benefits.in-view .benefit-row:nth-child(3) { animation-delay: 0.34s; }\n @keyframes whyRowIn { to { opacity: 1; transform: translateX(0); } }\n\n .why-section-container .benefit-row:hover { background: rgba(255, 255, 255, 0.55); transform: translateX(8px); }\n\n .why-section-container .benefit-icon {\n position: relative; z-index: 2; flex: none;\n width: 58px; height: 58px;\n display: flex; align-items: center; justify-content: center;\n }\n .why-section-container .benefit-icon .icon-ring {\n position: absolute; inset: 0; width: 100%; height: 100%;\n transform: rotate(-90deg);\n }\n .why-section-container .benefit-icon .icon-ring circle {\n fill: none; stroke: var(--why-color-04); stroke-width: 2;\n stroke-dasharray: 170; stroke-dashoffset: 170;\n transition: stroke-dashoffset 1s cubic-bezier(0.65,0,0.35,1);\n }\n .why-section-container .why-benefits.in-view .benefit-row:nth-child(1) .icon-ring circle { stroke-dashoffset: 0; transition-delay: 0.35s; }\n .why-section-container .why-benefits.in-view .benefit-row:nth-child(2) .icon-ring circle { stroke-dashoffset: 0; transition-delay: 0.47s; }\n .why-section-container .why-benefits.in-view .benefit-row:nth-child(3) .icon-ring circle { stroke-dashoffset: 0; transition-delay: 0.59s; }\n\n .why-section-container .benefit-icon .icon-core {\n position: relative; z-index: 2;\n width: 44px; height: 44px; border-radius: 50%;\n background: var(--why-blanco);\n display: flex; align-items: center; justify-content: center;\n font-size: 1.05rem; color: var(--why-color-04);\n box-shadow: 0 10px 26px rgba(0, 40, 66, 0.1);\n transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, color 0.3s ease;\n }\n .why-section-container .benefit-row:hover .icon-core {\n transform: rotate(-8deg) scale(1.12);\n background: linear-gradient(135deg, var(--why-color-04), var(--why-color-05));\n color: var(--why-blanco);\n }\n\n .why-section-container .benefit-text {\n font-family: var(--why-font-heading); font-weight: 600;\n font-size: clamp(1.02rem, 1.5vw, 1.2rem); color: var(--why-color-03);\n line-height: 1.4;\n }\n\n \/* Responsive *\/\n @media (max-width: 900px) {\n .why-section-container .why-content { \n grid-template-columns: 1fr; \n gap: 48px; \n direction: rtl; \n }\n .why-section-container .why-visual,\n .why-section-container .why-benefits {\n direction: ltr;\n }\n .why-section-container .why-visual { max-width: 380px; }\n .why-section-container .why-header { text-align: center; }\n .why-section-container .benefit-row { justify-content: center; text-align: center; padding-right: 0; }\n .why-section-container .why-benefits::before { display: none; }\n }\n\n @media (max-width: 560px) {\n .why-section-container .benefit-row { gap: 16px; padding: 16px 0; }\n .why-section-container .benefit-icon { width: 50px; height: 50px; }\n .why-section-container .benefit-icon .icon-core { width: 38px; height: 38px; font-size: 0.9rem; }\n .why-section-container .visual-tape { width: 56px; top: -12px; right: -10px; }\n }\n <\/style>\n\n <div class=\"why-glow\"><\/div>\n <div class=\"why-blob b1\"><\/div>\n <div class=\"why-blob b2\"><\/div>\n <div class=\"why-blob b3\"><\/div>\n <div class=\"why-watermark\">\u00bf?<\/div>\n\n <div class=\"why-container\">\n <div class=\"why-header\">\n <h2 class=\"why-title why-reveal\" id=\"whySectionTitle\">\u00bfPor qu\u00e9 atenderte con <span class=\"accent\">nosotros<\/span>?<\/h2>\n <p class=\"why-subtitle why-reveal\">\n Nuestro compromiso es ayudarte a encontrar la mejor alternativa para mejorar tu bienestar\n <\/p>\n <\/div>\n\n <div class=\"why-content\">\n <div class=\"why-visual why-reveal\">\n <div class=\"deco-ring\"><\/div>\n <div class=\"image-frame\" id=\"whyImageFrame\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/2150738594-1.webp\" alt=\"Bajar de Peso - Cl\u00ednica Bari\u00e1trica\">\n <\/div>\n <\/div>\n\n <ul class=\"why-benefits why-reveal\">\n <li class=\"benefit-row\">\n <div class=\"benefit-icon\">\n <svg class=\"icon-ring\" viewBox=\"0 0 58 58\"><circle cx=\"29\" cy=\"29\" r=\"27\"\/><\/svg>\n <div class=\"icon-core\"><i class=\"fas fa-award\"><\/i><\/div>\n <\/div>\n <div class=\"benefit-text\">M\u00e1s de 7 a\u00f1os de experiencia<\/div>\n <\/li>\n <li class=\"benefit-row\">\n <div class=\"benefit-icon\">\n <svg class=\"icon-ring\" viewBox=\"0 0 58 58\"><circle cx=\"29\" cy=\"29\" r=\"27\"\/><\/svg>\n <div class=\"icon-core\"><i class=\"fas fa-user-doctor\"><\/i><\/div>\n <\/div>\n <div class=\"benefit-text\">Equipo m\u00e9dico especializado en bari\u00e1trica<\/div>\n <\/li>\n <li class=\"benefit-row\">\n <div class=\"benefit-icon\">\n <svg class=\"icon-ring\" viewBox=\"0 0 58 58\"><circle cx=\"29\" cy=\"29\" r=\"27\"\/><\/svg>\n <div class=\"icon-core\"><i class=\"fas fa-hands-holding-circle\"><\/i><\/div>\n <\/div>\n <div class=\"benefit-text\">Acompa\u00f1amiento antes y despu\u00e9s del procedimiento<\/div>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n <script>\n (function() {\n const container = document.querySelector('.why-section-container');\n \n (function splitWords() {\n const el = container.querySelector('#whySectionTitle');\n if(!el) return;\n const nodes = Array.from(el.childNodes);\n el.innerHTML = '';\n let wordIndex = 0;\n nodes.forEach(node => {\n if (node.nodeType === Node.TEXT_NODE) {\n node.textContent.split(\/(\\s+)\/).forEach(chunk => {\n if (chunk.trim() === '') { el.appendChild(document.createTextNode(chunk)); return; }\n const span = document.createElement('span');\n span.className = 'word';\n span.textContent = chunk;\n span.style.animationDelay = (wordIndex * 0.06) + 's';\n wordIndex++;\n el.appendChild(span);\n });\n } else {\n node.style.animationDelay = (wordIndex * 0.06) + 's';\n wordIndex++;\n el.appendChild(node);\n }\n });\n })();\n\n const revealObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('in-view');\n revealObserver.unobserve(entry.target);\n }\n });\n }, { threshold: 0.15 });\n container.querySelectorAll('.why-reveal').forEach(el => revealObserver.observe(el));\n\n container.addEventListener('mousemove', (e) => {\n const r = container.getBoundingClientRect();\n container.style.setProperty('--why-mx', (e.clientX - r.left) + 'px');\n container.style.setProperty('--why-my', (e.clientY - r.top) + 'px');\n });\n\n const frame = container.querySelector('#whyImageFrame');\n frame?.addEventListener('mousemove', (e) => {\n const r = frame.getBoundingClientRect();\n const px = (e.clientX - r.left) \/ r.width - 0.5;\n const py = (e.clientY - r.top) \/ r.height - 0.5;\n frame.style.transform = `perspective(1000px) rotateX(${py * -8}deg) rotateY(${px * 8}deg) scale(1.02)`;\n });\n frame?.addEventListener('mouseleave', () => {\n frame.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) scale(1)';\n });\n })();\n <\/script>\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a75b405 e-con-full e-flex e-con e-parent\" data-id=\"a75b405\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e3a98fb elementor-widget elementor-widget-html\" data-id=\"e3a98fb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Especialistas \u00b7 3D Card Hover<\/title>\n\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Lexend:wght@300;400;500;600;700;800;900&family=Literata:ital,wght@0,400;0,600;0,700;1,400&display=swap\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\n\n <style>\n \n :root {\n --color-01: #f3d8d1;\n --color-02: #e8afa7;\n --color-03: #002842;\n --color-04: #d2a750;\n --color-05: #b37e34;\n --color-06: #245080;\n --font-heading: 'Lexend', sans-serif;\n --font-body: 'Literata', serif;\n --blanco: #ffffff;\n\n \/* Variables para efecto 3D *\/\n --card-height: 280px;\n --card-width: calc(var(--card-height) \/ 1.3);\n --spec-mx: 50%;\n --spec-my: 50%;\n }\n\n * { margin: 0; padding: 0; box-sizing: border-box; }\n\n body {\n font-family: var(--font-body);\n background: var(--color-01);\n overflow-x: hidden;\n }\n\n \/* ============================================\n SECCI\u00d3N ESPECIALIDADES\n ============================================ *\/\n .spec-section {\n position: relative;\n padding: clamp(60px, 10vw, 120px) 6%;\n background: var(--color-01);\n overflow: hidden;\n }\n\n \/* --- Fondo con parallax --- *\/\n .spec-parallax-bg {\n position: absolute;\n top: -12%;\n left: 0;\n width: 100%;\n height: 124%;\n z-index: 0;\n pointer-events: none;\n background-image: url('https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/9635-1.webp');\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n will-change: transform;\n transform: translateY(0);\n }\n\n \/* Velo sobre la imagen para mantener la legibilidad del contenido *\/\n .spec-parallax-overlay {\n position: absolute;\n inset: -12% 0;\n z-index: 0;\n pointer-events: none;\n background:\n linear-gradient(180deg, var(--color-01) 0%, rgba(243, 216, 209, 0.1) 12%, rgba(243, 216, 209, 0.42) 88%, var(--color-01) 100%);\n }\n\n \/* --- Glow interactivo --- *\/\n .spec-glow {\n position: absolute;\n inset: 0;\n z-index: 1;\n pointer-events: none;\n background: radial-gradient(500px circle at var(--spec-mx) var(--spec-my), rgba(210, 167, 80, 0.12), transparent 70%);\n }\n\n \/* --- Blobs decorativos --- *\/\n .spec-blob {\n position: absolute;\n border-radius: 50%;\n filter: blur(40px);\n z-index: 1;\n pointer-events: none;\n opacity: 0.3;\n }\n .spec-blob.b1 { width: 300px; height: 300px; background: var(--color-04); top: -5%; left: -5%; animation: specFloat 14s ease-in-out infinite; }\n .spec-blob.b2 { width: 250px; height: 250px; background: var(--color-06); bottom: -5%; right: -5%; animation: specFloat 12s ease-in-out infinite reverse; }\n @keyframes specFloat { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(15px, -15px) scale(1.05); } }\n\n .spec-wrapper {\n position: relative;\n z-index: 2;\n max-width: 1100px;\n margin: 0 auto;\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n\n \/* ============================================\n ENCABEZADO\n ============================================ *\/\n .spec-main-title {\n font-family: var(--font-heading);\n font-weight: 800;\n font-size: clamp(1.8rem, 3.5vw, 2.6rem);\n color: var(--color-03);\n line-height: 1.25;\n text-align: center;\n max-width: 850px;\n margin: 0 auto 50px auto;\n opacity: 0;\n transform: translateY(30px);\n }\n\n .spec-main-title .accent {\n color: var(--color-04);\n position: relative;\n }\n .spec-main-title .accent::after {\n content: '';\n position: absolute;\n left: 0;\n bottom: 2px;\n width: 100%;\n height: 8px;\n background: rgba(210, 167, 80, 0.15);\n border-radius: 8px;\n z-index: -1;\n transform: skewX(-6deg);\n }\n\n .spec-main-title.in-view {\n opacity: 1;\n transform: translateY(0);\n transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);\n }\n\n \/* MODIFICADO: Se a\u00f1ade el efecto de fondo de cristal (Glassmorphism) *\/\n .spec-footer-text {\n font-family: var(--font-body);\n font-weight: 400;\n font-size: clamp(1.05rem, 1.4vw, 1.25rem);\n color: var(--color-03); \/* Se cambi\u00f3 a un tono ligeramente m\u00e1s oscuro para mejor legibilidad *\/\n line-height: 1.6;\n text-align: center;\n max-width: 780px;\n margin: 60px auto 40px auto;\n opacity: 0;\n transform: translateY(25px);\n\n \/* Propiedades del efecto cristal *\/\n background: rgba(255, 255, 255, 0.35); \/* Fondo blanco con 35% de opacidad *\/\n backdrop-filter: blur(12px); \/* El desenfoque del fondo *\/\n -webkit-backdrop-filter: blur(12px); \/* Compatibilidad con Safari *\/\n padding: 24px 32px; \/* Espaciado interno para separar el texto del borde *\/\n border-radius: 16px; \/* Bordes redondeados sutiles *\/\n border: 1px solid rgba(255, 255, 255, 0.45); \/* Borde blanco semi-transparente *\/\n box-shadow: 0 8px 32px 0 rgba(0, 40, 66, 0.05); \/* Sombra muy suave para dar profundidad *\/\n }\n\n .spec-footer-text.in-view {\n opacity: 1;\n transform: translateY(0);\n transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s;\n }\n\n \/* ============================================\n GRID DE TARJETAS 3D\n ============================================ *\/\n .spec-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 24px;\n width: 100%;\n padding: 0;\n margin: 0;\n list-style: none;\n }\n\n \/* ============================================\n TARJETA 3D (Efecto hover estilo Mythrill)\n ============================================ *\/\n .spec-card {\n width: 100%;\n height: var(--card-height);\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n padding: 24px 16px;\n perspective: 2500px;\n background: var(--blanco);\n border-radius: 20px;\n box-shadow: 0 10px 30px rgba(0, 40, 66, 0.04);\n border: 1px solid rgba(255, 255, 255, 0.6);\n opacity: 0;\n transform: translateY(40px) scale(0.95);\n transition: box-shadow 0.4s ease, border 0.4s ease;\n }\n\n .spec-grid.in-view .spec-card {\n opacity: 1;\n transform: translateY(0) scale(1);\n transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease, border 0.4s ease;\n }\n\n \/* Delays escalonados *\/\n .spec-grid.in-view .spec-card:nth-child(1) { transition-delay: 0.05s; }\n .spec-grid.in-view .spec-card:nth-child(2) { transition-delay: 0.12s; }\n .spec-grid.in-view .spec-card:nth-child(3) { transition-delay: 0.19s; }\n .spec-grid.in-view .spec-card:nth-child(4) { transition-delay: 0.26s; }\n .spec-grid.in-view .spec-card:nth-child(5) { transition-delay: 0.33s; }\n .spec-grid.in-view .spec-card:nth-child(6) { transition-delay: 0.40s; }\n .spec-grid.in-view .spec-card:nth-child(7) { transition-delay: 0.47s; }\n .spec-grid.in-view .spec-card:nth-child(8) { transition-delay: 0.54s; }\n\n \/* ===== EFECTO 3D HOVER ===== *\/\n .spec-card .card-wrapper {\n transition: all 0.5s;\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n z-index: 0;\n border-radius: 20px;\n overflow: hidden;\n background: var(--blanco);\n }\n\n .spec-card .card-wrapper .card-bg {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n opacity: 0.04;\n transition: opacity 0.5s ease;\n }\n\n .spec-card:hover .card-wrapper {\n transform: perspective(900px) translateY(-5%) rotateX(20deg) translateZ(0);\n box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.2);\n }\n\n .spec-card .card-wrapper::before,\n .spec-card .card-wrapper::after {\n content: \"\";\n opacity: 0;\n width: 100%;\n height: 80px;\n transition: all 0.5s;\n position: absolute;\n left: 0;\n }\n .spec-card .card-wrapper::before {\n top: 0;\n height: 100%;\n background-image: linear-gradient(\n to top,\n transparent 46%,\n rgba(210, 167, 80, 0.08) 68%,\n rgba(210, 167, 80, 0.15) 97%\n );\n }\n .spec-card .card-wrapper::after {\n bottom: 0;\n opacity: 1;\n background-image: linear-gradient(\n to bottom,\n transparent 46%,\n rgba(210, 167, 80, 0.08) 68%,\n rgba(210, 167, 80, 0.15) 97%\n );\n }\n\n .spec-card:hover .card-wrapper::before,\n .spec-card:hover .card-wrapper::after {\n opacity: 1;\n }\n\n .spec-card:hover .card-wrapper::after {\n height: 120px;\n }\n\n \/* ===== CONTENIDO DE LA TARJETA (se eleva en 3D) ===== *\/\n .spec-card .card-content {\n position: relative;\n z-index: 2;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n transition: transform 0.5s;\n width: 100%;\n height: 100%;\n }\n\n .spec-card:hover .card-content {\n transform: translate3d(0%, -8px, 60px);\n }\n\n \/* Icono *\/\n .spec-card .spec-icon-wrapper {\n width: 70px;\n height: 70px;\n margin-bottom: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 16px;\n background: rgba(243, 216, 209, 0.4);\n transition: background 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\n }\n\n .spec-card:hover .spec-icon-wrapper {\n background: rgba(210, 167, 80, 0.15);\n transform: scale(1.15) rotate(4deg);\n }\n\n .spec-card .spec-icon-wrapper img {\n width: 44px;\n height: 44px;\n object-fit: contain;\n transition: filter 0.3s ease;\n }\n\n \/* T\u00edtulo *\/\n .spec-card .spec-card-title {\n font-family: var(--font-heading);\n font-weight: 600;\n font-size: 1.05rem;\n color: var(--color-03);\n margin: 0;\n padding: 0;\n transition: color 0.3s ease;\n text-align: center;\n }\n\n .spec-card:hover .spec-card-title {\n color: var(--color-04);\n }\n\n \/* N\u00famero decorativo que aparece en hover *\/\n .spec-card .card-number {\n position: absolute;\n bottom: 12px;\n right: 16px;\n font-family: var(--font-heading);\n font-weight: 900;\n font-size: 0.7rem;\n color: rgba(210, 167, 80, 0.08);\n transition: all 0.4s ease;\n letter-spacing: 1px;\n }\n\n .spec-card:hover .card-number {\n color: rgba(210, 167, 80, 0.2);\n transform: scale(1.2);\n }\n\n \/* ============================================\n BOT\u00d3N CTA\n ============================================ *\/\n .spec-btn-container {\n opacity: 0;\n transform: translateY(20px);\n }\n\n .spec-btn-container.in-view {\n opacity: 1;\n transform: translateY(0);\n transition: opacity 0.6s ease 0.6s, transform 0.6s ease 0.6s;\n }\n\n .spec-cta-btn {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n background: linear-gradient(135deg, var(--color-04), var(--color-05));\n color: var(--blanco);\n font-family: var(--font-heading);\n font-weight: 600;\n font-size: 1.05rem;\n padding: 16px 40px;\n border-radius: 50px;\n text-decoration: none !important;\n box-shadow: 0 10px 25px rgba(179, 126, 52, 0.35);\n transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease, filter 0.3s ease;\n border: none;\n cursor: pointer;\n }\n\n .spec-cta-btn i {\n transition: transform 0.3s ease;\n }\n\n .spec-cta-btn:hover {\n transform: translateY(-3px);\n box-shadow: 0 14px 30px rgba(179, 126, 52, 0.5);\n filter: brightness(1.05);\n color: #000;\n }\n\n .spec-cta-btn:hover i {\n transform: translateX(5px);\n }\n\n \/* ============================================\n RESPONSIVE\n ============================================ *\/\n @media (max-width: 1024px) {\n .spec-grid {\n grid-template-columns: repeat(3, 1fr);\n gap: 20px;\n }\n :root {\n --card-height: 250px;\n }\n }\n\n @media (max-width: 768px) {\n .spec-section {\n padding: 50px 4%;\n }\n .spec-grid {\n grid-template-columns: repeat(2, 1fr);\n gap: 16px;\n }\n :root {\n --card-height: 220px;\n }\n .spec-card .spec-icon-wrapper {\n width: 56px;\n height: 56px;\n }\n .spec-card .spec-icon-wrapper img {\n width: 34px;\n height: 34px;\n }\n .spec-card .spec-card-title {\n font-size: 0.9rem;\n }\n \/* Adaptaci\u00f3n del bloque de cristal en m\u00f3viles *\/\n .spec-footer-text {\n padding: 20px 24px;\n margin: 40px auto 30px auto;\n }\n }\n\n @media (max-width: 480px) {\n .spec-section {\n padding: 40px 4%;\n }\n .spec-grid {\n grid-template-columns: 1fr 1fr;\n gap: 12px;\n }\n :root {\n --card-height: 190px;\n }\n .spec-card .spec-icon-wrapper {\n width: 44px;\n height: 44px;\n margin-bottom: 10px;\n }\n .spec-card .spec-icon-wrapper img {\n width: 28px;\n height: 28px;\n }\n .spec-card .spec-card-title {\n font-size: 0.75rem;\n }\n .spec-card .card-number {\n display: none;\n }\n .spec-cta-btn {\n width: 100%;\n justify-content: center;\n font-size: 0.9rem;\n padding: 14px 24px;\n }\n .spec-footer-text {\n margin: 30px auto 25px auto;\n padding: 16px 20px;\n }\n }\n\n @media (max-width: 380px) {\n .spec-grid {\n grid-template-columns: 1fr 1fr;\n gap: 8px;\n }\n :root {\n --card-height: 170px;\n }\n .spec-card {\n padding: 16px 10px;\n border-radius: 14px;\n }\n .spec-card .spec-icon-wrapper {\n width: 36px;\n height: 36px;\n }\n .spec-card .spec-icon-wrapper img {\n width: 22px;\n height: 22px;\n }\n .spec-card .spec-card-title {\n font-size: 0.65rem;\n }\n }\n\n \/* Respeta preferencia de movimiento reducido *\/\n @media (prefers-reduced-motion: reduce) {\n .spec-parallax-bg { transform: none !important; }\n }\n <\/style>\n<\/head>\n<body>\n\n <section class=\"spec-section\">\n \n <div class=\"spec-parallax-bg\" id=\"specParallaxBg\"><\/div>\n <div class=\"spec-parallax-overlay\"><\/div>\n\n \n <div class=\"spec-glow\"><\/div>\n\n \n <div class=\"spec-blob b1\"><\/div>\n <div class=\"spec-blob b2\"><\/div>\n\n <div class=\"spec-wrapper\">\n \n <h2 class=\"spec-main-title spec-reveal\">\n Somos especialistas en las enfermedades asociadas al <span class=\"accent\">sobrepeso y la obesidad<\/span>\n <\/h2>\n\n \n <ul class=\"spec-grid spec-reveal\">\n \n <li class=\"spec-card\">\n <div class=\"card-wrapper\">\n <div class=\"card-bg\"><\/div>\n <\/div>\n <div class=\"card-content\">\n <div class=\"spec-icon-wrapper\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2025\/12\/obesity-1.svg\" alt=\"Sobrepeso\">\n <\/div>\n <h3 class=\"spec-card-title\">Sobrepeso<\/h3>\n <\/div>\n <\/li>\n\n \n <li class=\"spec-card\">\n <div class=\"card-wrapper\">\n <div class=\"card-bg\"><\/div>\n <\/div>\n <div class=\"card-content\">\n <div class=\"spec-icon-wrapper\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2025\/12\/obesity.svg\" alt=\"Obesidad\">\n <\/div>\n <h3 class=\"spec-card-title\">Obesidad<\/h3>\n <\/div>\n <\/li>\n\n \n <li class=\"spec-card\">\n <div class=\"card-wrapper\">\n <div class=\"card-bg\"><\/div>\n <\/div>\n <div class=\"card-content\">\n <div class=\"spec-icon-wrapper\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2025\/12\/glucose-meter.svg\" alt=\"Diabetes\">\n <\/div>\n <h3 class=\"spec-card-title\">Diabetes<\/h3>\n <\/div>\n <\/li>\n\n \n <li class=\"spec-card\">\n <div class=\"card-wrapper\">\n <div class=\"card-bg\"><\/div>\n <\/div>\n <div class=\"card-content\">\n <div class=\"spec-icon-wrapper\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2025\/12\/adrenaline.svg\" alt=\"Hipertensi\u00f3n\">\n <\/div>\n <h3 class=\"spec-card-title\">Hipertensi\u00f3n<\/h3>\n <\/div>\n <\/li>\n\n \n <li class=\"spec-card\">\n <div class=\"card-wrapper\">\n <div class=\"card-bg\"><\/div>\n <\/div>\n <div class=\"card-content\">\n <div class=\"spec-icon-wrapper\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2025\/12\/endocrine-system.svg\" alt=\"Hipotiroidismo\">\n <\/div>\n <h3 class=\"spec-card-title\">Hipotiroidismo<\/h3>\n <\/div>\n <\/li>\n\n \n <li class=\"spec-card\">\n <div class=\"card-wrapper\">\n <div class=\"card-bg\"><\/div>\n <\/div>\n <div class=\"card-content\">\n <div class=\"spec-icon-wrapper\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2025\/12\/tubal-ligation.svg\" alt=\"Ovario poliqu\u00edstico\">\n <\/div>\n <h3 class=\"spec-card-title\">Ovario poliqu\u00edstico<\/h3>\n <\/div>\n <\/li>\n\n \n <li class=\"spec-card\">\n <div class=\"card-wrapper\">\n <div class=\"card-bg\"><\/div>\n <\/div>\n <div class=\"card-content\">\n <div class=\"spec-icon-wrapper\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2025\/12\/fertilization.svg\" alt=\"Fertilidad\">\n <\/div>\n <h3 class=\"spec-card-title\">Fertilidad<\/h3>\n <\/div>\n <\/li>\n\n \n <li class=\"spec-card\">\n <div class=\"card-wrapper\">\n <div class=\"card-bg\"><\/div>\n <\/div>\n <div class=\"card-content\">\n <div class=\"spec-icon-wrapper\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2025\/12\/vaccine.svg\" alt=\"Resistencia a la insulina\">\n <\/div>\n <h3 class=\"spec-card-title\">Resistencia a la insulina<\/h3>\n <\/div>\n <\/li>\n <\/ul>\n\n \n <p class=\"spec-footer-text spec-reveal\">\n Cada persona tiene necesidades diferentes. Nuestro objetivo es ayudarte a encontrar el tratamiento m\u00e1s adecuado para ti\n <\/p>\n\n \n <div class=\"spec-btn-container spec-reveal\">\n <a href=\"https:\/\/wa.link\/zvs595\" \n target=\"_blank\" \n rel=\"noopener noreferrer\" \n class=\"spec-cta-btn\">\n Agendar una cita aqu\u00ed <i class=\"fa-solid fa-arrow-right\"><\/i>\n <\/a>\n <\/div>\n <\/div>\n <\/section>\n \n\n <script>\n (function() {\n const scope = document.querySelector('.spec-section');\n if (!scope) return;\n const parallaxBg = document.getElementById('specParallaxBg');\n const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n \/\/ 1. Efecto Glow que sigue al cursor\n scope.addEventListener('mousemove', (e) => {\n const rect = scope.getBoundingClientRect();\n scope.style.setProperty('--spec-mx', (e.clientX - rect.left) + 'px');\n scope.style.setProperty('--spec-my', (e.clientY - rect.top) + 'px');\n });\n\n \/\/ 2. Observer para animaciones al hacer scroll\n const observerOptions = { threshold: 0.1, rootMargin: \"0px 0px -20px 0px\" };\n const specObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('in-view');\n specObserver.unobserve(entry.target);\n }\n });\n }, observerOptions);\n\n \/\/ Observar elementos\n scope.querySelectorAll('.spec-reveal, .spec-grid').forEach(element => {\n specObserver.observe(element);\n });\n\n \/\/ 3. Efecto 3D adicional: cada tarjeta responde al mouse individualmente\n const cards = scope.querySelectorAll('.spec-card');\n cards.forEach(card => {\n card.addEventListener('mousemove', (e) => {\n const rect = card.getBoundingClientRect();\n const x = (e.clientX - rect.left) \/ rect.width - 0.5;\n const y = (e.clientY - rect.top) \/ rect.height - 0.5;\n card.style.setProperty('--rotate-x', y * 6 + 'deg');\n card.style.setProperty('--rotate-y', x * -6 + 'deg');\n });\n card.addEventListener('mouseleave', () => {\n card.style.setProperty('--rotate-x', '0deg');\n card.style.setProperty('--rotate-y', '0deg');\n });\n });\n\n \/\/ 4. Parallax del fondo al hacer scroll\n if (parallaxBg && !reduceMotion) {\n const PARALLAX_STRENGTH = 0.18;\n\n let ticking = false;\n function updateParallax() {\n const rect = scope.getBoundingClientRect();\n const viewportCenter = window.innerHeight \/ 2;\n const sectionCenter = rect.top + rect.height \/ 2;\n const offset = (viewportCenter - sectionCenter) * PARALLAX_STRENGTH;\n parallaxBg.style.transform = `translateY(${offset}px)`;\n ticking = false;\n }\n\n window.addEventListener('scroll', () => {\n if (!ticking) {\n requestAnimationFrame(updateParallax);\n ticking = true;\n }\n }, { passive: true });\n\n window.addEventListener('resize', () => {\n requestAnimationFrame(updateParallax);\n });\n\n updateParallax();\n }\n })();\n <\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-09ae793 e-con-full e-flex e-con e-parent\" data-id=\"09ae793\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f04d7eb elementor-widget elementor-widget-html\" data-id=\"f04d7eb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"consult-wp-section\" id=\"consultas\">\n\n <style>\n .consult-wp-section {\n --c-blush: #f3d8d1;\n --c-rose: #e8afa7;\n --c-navy: #002842;\n --c-gold: #d2a750;\n --c-gold-deep: #b37e34;\n --c-blue: #245080;\n --font-display: 'Literata', serif;\n --font-body: 'Lexend', sans-serif;\n\n font-family: var(--font-body);\n color: var(--c-navy);\n position: relative;\n background: #fbeee9;\n padding: 3rem 1.5rem; \/* Ajustado para que no cree un hueco enorme *\/\n overflow: hidden;\n margin-top: 0 !important; \/* Eliminado el margen superior *\/\n margin-bottom: 0 !important; \/* Eliminado el margen inferior *\/\n }\n\n \/* MESH BACKGROUND *\/\n .consult-wp-section .mesh{\n position:absolute;\n inset:0;\n z-index:0;\n pointer-events:none;\n overflow: hidden;\n }\n .consult-wp-section .mesh span{\n position:absolute;\n border-radius:50%;\n filter: blur(50px);\n opacity:.5;\n animation: blobMoveWP 16s ease-in-out infinite;\n mix-blend-mode: multiply;\n }\n .consult-wp-section .mesh span:nth-child(1){ width:420px; height:420px; background:var(--c-rose); top:-140px; left:-120px; animation-delay:0s; }\n .consult-wp-section .mesh span:nth-child(2){ width:340px; height:340px; background:var(--c-gold); top:220px; right:-140px; animation-delay:3.2s; animation-duration:20s; }\n .consult-wp-section .mesh span:nth-child(3){ width:260px; height:260px; background:var(--c-blue); opacity:.14; bottom:-80px; left:30%; animation-delay:6s; animation-duration:22s; }\n \n @keyframes blobMoveWP{\n 0%,100%{ transform: translate(0,0) scale(1); }\n 33%{ transform: translate(30px,-25px) scale(1.08); }\n 66%{ transform: translate(-20px,20px) scale(.95); }\n }\n\n .consult-wp-section .grain{\n position:absolute; inset:0; z-index:0;\n opacity:.05; pointer-events:none;\n background-image:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'\/%3E%3C\/svg%3E\");\n }\n\n \/* LLUVIA DE FLORES ANIMADA *\/\n .flower-particle {\n position: absolute;\n top: -10%;\n z-index: 1;\n pointer-events: none;\n fill: var(--c-rose);\n opacity: 0.7;\n animation: rainFlowerWP linear infinite;\n }\n @keyframes rainFlowerWP {\n 0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }\n 10% { opacity: 0.8; }\n 90% { opacity: 0.4; }\n 100% { transform: translateY(110vh) translateX(80px) rotate(720deg); opacity: 0; }\n }\n\n .consult-wp-section .wrap{\n max-width: 1160px;\n margin: 0 auto;\n position:relative;\n z-index:2;\n }\n\n .consult-wp-section .head-block{\n text-align:center;\n opacity:0; transform: translateY(20px);\n transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);\n }\n .consult-wp-section .head-block.is-visible{ opacity:1; transform:none; }\n\n .consult-wp-section .eyebrow{\n display:inline-flex;\n align-items:center;\n gap:.5rem;\n font-family: var(--font-body);\n font-weight:600;\n font-size:.8rem;\n letter-spacing:.08em;\n color: var(--c-gold-deep);\n background: #fff;\n border: 1px solid var(--c-rose);\n padding: .5rem 1.15rem;\n border-radius: 999px;\n margin-bottom: 1.7rem;\n box-shadow: 0 8px 20px -12px rgba(179,126,52,.4);\n }\n .consult-wp-section .eyebrow svg{ width:13px; height:13px; animation: spinWP 6s linear infinite; }\n @keyframes spinWP{ to{ transform: rotate(360deg); } }\n\n .consult-wp-section .head-block h2{\n font-family: var(--font-display);\n font-weight: 500;\n font-size: clamp(2.2rem, 4.2vw, 3.2rem);\n line-height:1.16;\n color: var(--c-navy);\n max-width: 20ch;\n margin: 0 auto;\n }\n .consult-wp-section .head-block h2 em{\n font-style: italic;\n background: linear-gradient(100deg, var(--c-gold-deep), var(--c-gold) 40%, var(--c-gold-deep));\n background-size: 220% 100%;\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n animation: shimmerTextWP 5s ease-in-out infinite;\n }\n @keyframes shimmerTextWP{\n 0%,100%{ background-position: 0% 50%; }\n 50%{ background-position: 100% 50%; }\n }\n\n .consult-wp-section .head-block p{\n margin: 1.3rem auto 0;\n max-width: 46ch;\n font-size: 1.05rem;\n line-height:1.7;\n color: #5c6b78;\n }\n\n .consult-wp-section .content-grid{\n margin-top: 3.6rem;\n display:grid;\n grid-template-columns: .8fr 1.2fr;\n gap: 1.6rem;\n align-items:stretch;\n }\n\n .consult-wp-section .price-stack{\n display:flex;\n flex-direction:column;\n gap: 1.2rem;\n justify-content:center;\n }\n\n .consult-wp-section .price-card{\n position:relative;\n background:#fff;\n border-radius: 18px;\n padding: 1.7rem 1.8rem;\n box-shadow: 0 18px 40px -28px rgba(0,40,66,.35);\n border-left: 4px solid var(--c-rose);\n opacity:0; transform: translateX(-24px);\n transition: opacity .6s ease, transform .6s ease, box-shadow .35s ease;\n will-change: transform;\n overflow:hidden;\n }\n .consult-wp-section .price-card::before{\n content:\"\";\n position:absolute; inset:0;\n background: linear-gradient(120deg, transparent 30%, rgba(210,167,80,.16) 50%, transparent 70%);\n transform: translateX(-120%);\n transition: transform .7s ease;\n }\n .consult-wp-section .price-card:hover::before{ transform: translateX(120%); }\n .consult-wp-section .price-card:hover{ box-shadow: 0 26px 50px -26px rgba(0,40,66,.45); }\n .consult-wp-section .price-card.is-visible{ opacity:1; transform:none; }\n .consult-wp-section .price-card:nth-child(2){ border-left-color: var(--c-blue); transition-delay:.14s; }\n\n .consult-wp-section .price-card__label{\n display:flex;\n align-items:center;\n gap:.55rem;\n font-size:.95rem;\n font-weight:500;\n color:#5c6b78;\n margin-bottom:.6rem;\n }\n .consult-wp-section .price-card__label svg{ width:18px; height:18px; flex:none; }\n\n .consult-wp-section .price-card__amount{\n font-family: var(--font-display);\n font-weight:600;\n font-size: 2.15rem;\n color: var(--c-navy);\n display:flex;\n align-items:baseline;\n gap:.4rem;\n }\n .consult-wp-section .price-card__amount .prefix{\n font-family: var(--font-body);\n font-weight:500;\n font-size:1rem;\n color:#8a97a3;\n }\n\n .consult-wp-section .info-card{\n position:relative;\n background:#fff;\n border-radius: 22px;\n padding: 2.6rem 2.4rem 2.4rem;\n box-shadow: 0 24px 55px -30px rgba(0,40,66,.4);\n opacity:0; transform: translateY(24px);\n transition: opacity .8s ease .12s, transform .8s ease .12s;\n }\n .consult-wp-section .info-card.is-visible{ opacity:1; transform:none; }\n\n .consult-wp-section .image-ring{\n position:absolute;\n top: -52px;\n right: 6px;\n width: 174px;\n height: 174px;\n pointer-events:none;\n }\n .consult-wp-section .image-ring svg{\n width:100%; height:100%;\n animation: ringSpinWP 22s linear infinite;\n }\n @keyframes ringSpinWP{ to{ transform: rotate(360deg); } }\n\n .consult-wp-section .info-card__image{\n position:absolute;\n top: -34px;\n right: 24px;\n width: 150px;\n height: 150px;\n object-fit: cover;\n border-radius: \n border: 4px solid #fff;\n animation: imgFloatWP 5s ease-in-out infinite;\n }\n @keyframes imgFloatWP{\n 0%,100%{ transform: rotate(4deg) translateY(0); }\n 50%{ transform: rotate(2deg) translateY(-8px); }\n }\n\n .consult-wp-section .info-card h3{\n font-family: var(--font-display);\n font-weight:500;\n font-size: 1.4rem;\n color: var(--c-navy);\n max-width: 58%;\n margin-bottom: 1.6rem;\n }\n\n .consult-wp-section .checklist{ list-style:none; padding:0; margin:0;}\n .consult-wp-section .check-item{\n display:flex;\n align-items:center;\n gap:.9rem;\n padding: .85rem 0;\n border-bottom: 1px solid #f0e6e2;\n font-size: 1rem;\n color: #33414c;\n opacity:0; transform: translateX(-14px) scale(.98);\n transition: opacity .5s cubic-bezier(.34,1.56,.64,1), transform .5s cubic-bezier(.34,1.56,.64,1);\n }\n .consult-wp-section .check-item:last-child{ border-bottom:none; }\n .consult-wp-section .info-card.is-visible .check-item{ opacity:1; transform:none; }\n .consult-wp-section .info-card.is-visible .check-item:nth-child(1){ transition-delay:.2s; }\n .consult-wp-section .info-card.is-visible .check-item:nth-child(2){ transition-delay:.3s; }\n .consult-wp-section .info-card.is-visible .check-item:nth-child(3){ transition-delay:.4s; }\n .consult-wp-section .info-card.is-visible .check-item:nth-child(4){ transition-delay:.5s; }\n .consult-wp-section .info-card.is-visible .check-item:nth-child(5){ transition-delay:.6s; }\n\n .consult-wp-section .check-item__icon{\n flex:none;\n width: 34px; height:34px;\n border-radius: 10px;\n background: #fdf1ed;\n display:flex; align-items:center; justify-content:center;\n transition: transform .3s ease, background .3s ease;\n }\n .consult-wp-section .check-item:hover .check-item__icon{\n transform: rotate(-8deg) scale(1.1);\n background: var(--c-rose);\n }\n .consult-wp-section .check-item__icon svg{ width:20px; height:20px; transition: stroke .3s; }\n .consult-wp-section .check-item:hover .check-item__icon svg{ stroke: #fff; }\n\n .consult-wp-section .cta-wrap{\n margin-top: 2.6rem;\n text-align:center;\n }\n .consult-wp-section .btn-primary{\n position:relative;\n font-family: var(--font-body);\n font-weight:600;\n font-size:1.02rem;\n color: #fff !important;\n text-decoration: none !important;\n background: linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold-deep) 100%);\n background-size: 180% 180%;\n border: none;\n padding: 1.1rem 2.6rem;\n border-radius: 999px;\n cursor:pointer;\n display:inline-flex;\n align-items:center;\n gap:.65rem;\n overflow:hidden;\n box-shadow: 0 18px 36px -16px rgba(179,126,52,.65);\n transition: transform .3s ease, box-shadow .3s ease, background-position .6s ease;\n animation: btnGradientWP 6s ease-in-out infinite;\n }\n @keyframes btnGradientWP{\n 0%,100%{ background-position: 0% 50%; }\n 50%{ background-position: 100% 50%; }\n }\n .consult-wp-section .btn-primary::after{\n content:\"\";\n position:absolute;\n top:0; left:-60%;\n width:40%; height:100%;\n background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);\n transform: skewX(-20deg);\n animation: shineWP 3.2s ease-in-out infinite;\n }\n @keyframes shineWP{ 0%{ left:-60%; } 45%{ left:130%; } 100%{ left:130%; } }\n .consult-wp-section .btn-primary svg{ width:19px; height:19px; position:relative; z-index:1; transition: transform .3s ease; }\n .consult-wp-section .btn-primary span{ position:relative; z-index:1; }\n .consult-wp-section .btn-primary:hover{ transform: translateY(-4px); box-shadow: 0 26px 46px -18px rgba(179,126,52,.75); }\n .consult-wp-section .btn-primary:hover svg{ transform: translateX(4px); }\n\n .consult-wp-section .cta-ring{\n position:absolute;\n inset:-6px;\n border-radius:999px;\n border:1.5px solid var(--c-gold);\n animation: pulseRingWP 2.6s cubic-bezier(.4,0,.6,1) infinite;\n pointer-events:none;\n }\n @keyframes pulseRingWP{ 0%{ transform:scale(1); opacity:.6; } 80%{ transform:scale(1.14); opacity:0; } 100%{ transform:scale(1.14); opacity:0; } }\n .consult-wp-section .cta-inner{ position:relative; display:inline-block; }\n\n @media (max-width: 880px){\n .consult-wp-section .content-grid{ grid-template-columns: 1fr; }\n .consult-wp-section .info-card__image, .consult-wp-section .image-ring{ width:110px; height:110px; top:-26px; right:16px; }\n .consult-wp-section .info-card h3{ max-width:68%; }\n }\n\n @media (max-width: 520px){\n .consult-wp-section { padding-top: 3.5rem; padding-bottom: 3.5rem; }\n .consult-wp-section .info-card{ padding: 2.2rem 1.5rem 2rem; }\n .consult-wp-section .info-card__image{ position:static; margin-bottom:1.2rem; animation:none; transform:none; width:100%; height:150px; }\n .consult-wp-section .image-ring{ display:none; }\n .consult-wp-section .info-card h3{ max-width:100%; }\n }\n\n @media (prefers-reduced-motion: reduce){\n .consult-wp-section *{ animation:none !important; transition:none !important; }\n }\n <\/style>\n\n <div class=\"mesh\"><span><\/span><span><\/span><span><\/span><\/div>\n <div class=\"grain\"><\/div>\n\n <svg class=\"flower-particle\" style=\"left: 10%; width: 18px; height: 18px; animation-duration: 8s; animation-delay: 0s;\" viewBox=\"0 0 24 24\"><path d=\"M12,2C12,2 4,8 4,14C4,18.4 7.6,22 12,22C16.4,22 20,18.4 20,14C20,8 12,2 12,2Z\"\/><\/svg>\n <svg class=\"flower-particle\" style=\"left: 25%; width: 22px; height: 22px; animation-duration: 11s; animation-delay: 3s; fill: #f8c1b9;\" viewBox=\"0 0 24 24\"><path d=\"M12,2A3,3 0 0,1 15,5A3,3 0 0,1 12,8A3,3 0 0,1 9,5A3,3 0 0,1 12,2M12,16A3,3 0 0,1 15,19A3,3 0 0,1 12,22A3,3 0 0,1 9,19A3,3 0 0,1 12,16M19,9A3,3 0 0,1 22,12A3,3 0 0,1 19,15A3,3 0 0,1 16,12A3,3 0 0,1 19,9M5,9A3,3 0 0,1 8,12A3,3 0 0,1 5,15A3,3 0 0,1 2,12A3,3 0 0,1 5,9Z\"\/><\/svg>\n <svg class=\"flower-particle\" style=\"left: 60%; width: 14px; height: 14px; animation-duration: 9s; animation-delay: 1.5s;\" viewBox=\"0 0 24 24\"><path d=\"M12,2C12,2 4,8 4,14C4,18.4 7.6,22 12,22C16.4,22 20,18.4 20,14C20,8 12,2 12,2Z\"\/><\/svg>\n <svg class=\"flower-particle\" style=\"left: 85%; width: 20px; height: 20px; animation-duration: 13s; animation-delay: 5s; fill: #efc3b9;\" viewBox=\"0 0 24 24\"><path d=\"M12,2C12,2 4,8 4,14C4,18.4 7.6,22 12,22C16.4,22 20,18.4 20,14C20,8 12,2 12,2Z\"\/><\/svg>\n\n <div class=\"wrap\">\n <div class=\"head-block\" id=\"wp-head-block\">\n <span class=\"eyebrow\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#b37e34\" stroke-width=\"2\"><path d=\"M12 2v4M12 18v4M2 12h4M18 12h4M5 5l2.8 2.8M16.2 16.2 19 19M19 5l-2.8 2.8M7.8 16.2 5 19\"\/><\/svg>\n Consulta\n <\/span>\n <h2>Tu valoraci\u00f3n es el <em>primer paso<\/em><\/h2>\n <p>Antes de hablar de tratamientos, lo m\u00e1s importante es conocer tu estado de salud y entender cu\u00e1les son tus objetivos<\/p>\n <\/div>\n\n <div class=\"content-grid\">\n <div class=\"price-stack\">\n <div class=\"price-card\" id=\"wp-card-1\">\n <div class=\"price-card__label\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#b37e34\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"8\" r=\"3.4\"\/>\n <path d=\"M5 20c0-3.9 3.13-7 7-7s7 3.1 7 7\"\/>\n <\/svg>\n Consulta presencial\n <\/div>\n <div class=\"price-card__amount\">\n <span class=\"prefix\">Consulta en<\/span> \n <span class=\"count\" data-target=\"1000\">$0<\/span>\n <\/div>\n <\/div>\n\n <div class=\"price-card\" id=\"wp-card-2\">\n <div class=\"price-card__label\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#245080\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"2.5\" y=\"6\" width=\"13\" height=\"12\" rx=\"2.4\"\/>\n <path d=\"M15.5 10.2 21 7.5v9l-5.5-2.7\"\/>\n <\/svg>\n Consulta por videollamada\n <\/div>\n <div class=\"price-card__amount\">\n <span class=\"count\" data-target=\"800\">$0<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"info-card\" id=\"wp-info-card\">\n <div class=\"image-ring\">\n <svg viewBox=\"0 0 174 174\">\n <circle cx=\"87\" cy=\"87\" r=\"82\" fill=\"none\" stroke=\"#d2a750\" stroke-width=\"1.4\" stroke-dasharray=\"3 9\" opacity=\".55\"\/>\n <\/svg>\n <\/div>\n <img decoding=\"async\" class=\"info-card__image\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/img-hero-23.webp\" alt=\"Nutrici\u00f3n y alimentaci\u00f3n saludable\">\n <h3>En tu consulta recibir\u00e1s:<\/h3>\n <ul class=\"checklist\">\n \n <li class=\"check-item\">\n <span class=\"check-item__icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#b37e34\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"\/>\n <polyline points=\"14 2 14 8 20 8\"\/>\n <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"\/>\n <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"\/>\n <polyline points=\"10 9 9 9 8 9\"\/>\n <\/svg>\n <\/span>\n Historia cl\u00ednica completa\n <\/li>\n \n <li class=\"check-item\">\n <span class=\"check-item__icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#b37e34\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M12 2C8.5 2 6 6.5 6 12c0 4.5 2.5 8 6 8s6-3.5 6-8c0-5.5-2.5-12-6-12z\"\/>\n <circle cx=\"12\" cy=\"14\" r=\"3\" fill=\"none\"\/>\n <\/svg>\n <\/span>\n Evaluaci\u00f3n m\u00e9dica personalizada\n <\/li>\n \n <li class=\"check-item\">\n <span class=\"check-item__icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#b37e34\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2\"\/>\n <rect x=\"8\" y=\"2\" width=\"8\" height=\"4\" rx=\"1\" ry=\"1\"\/>\n <circle cx=\"12\" cy=\"13\" r=\"3\"\/>\n <line x1=\"14.1\" y1=\"15.1\" x2=\"17\" y2=\"18\"\/>\n <\/svg>\n <\/span>\n Revisi\u00f3n de estudios previos (si cuentas con ellos)\n <\/li>\n \n <li class=\"check-item\">\n <span class=\"check-item__icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#b37e34\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M12 5c.5-1.5 2-2.5 3.5-2.5.5 0 1 0 1 .5s-.5 1.5-2 2.5c-1 .5-2 .5-2.5-.5z\"\/>\n <path d=\"M12 6c-1.5-1.5-3.5-1.5-5 0A6 6 0 0 0 12 18a6 6 0 0 0 5-12c-1.5-1.5-3.5-1.5-5 0z\"\/>\n <\/svg>\n <\/span>\n Explicaci\u00f3n clara de las alternativas disponibles\n <\/li>\n \n <li class=\"check-item\">\n <span class=\"check-item__icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#b37e34\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"12\" r=\"9\"\/>\n <polyline points=\"12 6 12 12 16 14\"\/>\n <path d=\"M8 12h8\"\/>\n <\/svg>\n <\/span>\n Plan de tratamiento de acuerdo con tus necesidades\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n <div class=\"cta-wrap\">\n <span class=\"cta-inner\">\n <span class=\"cta-ring\"><\/span>\n <a class=\"btn-primary\" href=\"https:\/\/wa.link\/zvs595\" target=\"_blank\" rel=\"noopener noreferrer\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"2\"\/><path d=\"M3 10h18M8 3v4M16 3v4\"\/>\n <\/svg>\n <span>Programar mi cita<\/span>\n <\/a>\n <\/span>\n <\/div>\n <\/div>\n\n <script>\n (function() {\n \/\/ Reveal animations\n const wpTargets = document.querySelectorAll('#wp-head-block, #wp-card-1, #wp-card-2, #wp-info-card');\n if (wpTargets.length > 0) {\n const wpIo = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting){\n entry.target.classList.add('is-visible');\n wpIo.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1 });\n wpTargets.forEach(el => wpIo.observe(el));\n }\n\n \/\/ Count up animations\n const wpCounters = document.querySelectorAll('.consult-wp-section .count');\n if (wpCounters.length > 0) {\n const wpCounterIO = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting){\n const el = entry.target;\n const target = parseInt(el.dataset.target, 10);\n const duration = 1200;\n const start = performance.now();\n \n function tick(now){\n const p = Math.min((now - start) \/ duration, 1);\n const eased = 1 - Math.pow(1 - p, 3);\n const val = Math.round(eased * target);\n el.textContent = '$' + val.toLocaleString('en-US') + ' MXN';\n if (p < 1) requestAnimationFrame(tick);\n }\n requestAnimationFrame(tick);\n wpCounterIO.unobserve(el);\n }\n });\n }, { threshold: 0.2 });\n wpCounters.forEach(el => wpCounterIO.observe(el));\n }\n\n \/\/ 3D Tilt effect\n document.querySelectorAll('.consult-wp-section .price-card').forEach(card => {\n card.addEventListener('mousemove', (e) => {\n const r = card.getBoundingClientRect();\n const x = (e.clientX - r.left) \/ r.width - 0.5;\n const y = (e.clientY - r.top) \/ r.height - 0.5;\n card.style.transform = `perspective(600px) rotateX(${(-y*6).toFixed(2)}deg) rotateY(${(x*6).toFixed(2)}deg) translateY(-4px)`;\n });\n card.addEventListener('mouseleave', () => { card.style.transform = ''; });\n });\n })();\n <\/script>\n\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-512a7c0 e-con-full e-flex e-con e-parent\" data-id=\"512a7c0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1d910be elementor-widget elementor-widget-html\" data-id=\"1d910be\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Literata:ital,opsz,wght@0,7..72,400;0,7..72,500;0,7..72,600;0,7..72,700;1,7..72,400&family=Lexend:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n\n<section class=\"pro-help-section\" id=\"wp-help-section\">\n \n <div class=\"help-bg-shapes\" aria-hidden=\"true\">\n <span class=\"help-blob help-blob-1\"><\/span>\n <span class=\"help-blob help-blob-2\"><\/span>\n <span class=\"help-blob help-blob-3\"><\/span>\n <\/div>\n\n <div class=\"help-container\">\n \n <div class=\"help-header\" data-help-reveal>\n <h2>\u00bfC\u00f3mo podemos ayudarte?<\/h2>\n <div class=\"help-divider\"><\/div>\n <\/div>\n\n \n <div class=\"help-split-layout\">\n \n \n <div class=\"help-left-visual\" data-help-reveal style=\"--d:0.1s;\">\n <div class=\"visual-sticky-wrapper\">\n \n \n <div class=\"visual-item active\" data-visual=\"1\">\n <div class=\"visual-content-placeholder\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/8681.webp\" alt=\"Control de peso\" \/>\n <\/div>\n <\/div>\n\n \n <div class=\"visual-item\" data-visual=\"2\">\n <div class=\"visual-content-placeholder\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/Nutricio\u0301n-para-bajar-de-peso-1.webp\" alt=\"Nutrici\u00f3n para bajar de peso\" \/>\n <\/div>\n <\/div>\n\n \n <div class=\"visual-item\" data-visual=\"3\">\n <div class=\"visual-content-placeholder\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/Tratamientos-me\u0301dicos.webp\" alt=\"Tratamientos m\u00e9dicos para sobrepeso\" \/>\n <\/div>\n <\/div>\n\n \n <div class=\"visual-item\" data-visual=\"4\">\n <div class=\"visual-content-placeholder\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/Procedimientos-baria\u0301tricos.webp\" alt=\"Procedimientos bari\u00e1tricos\" \/>\n <\/div>\n <\/div>\n\n \n <div class=\"visual-item\" data-visual=\"5\">\n <div class=\"visual-content-placeholder\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1505751172876-fa1923c5c528?auto=format&fit=crop&w=800&q=80\" alt=\"Enfermedades asociadas\" \/>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n\n \n <div class=\"help-right-list\">\n \n \n <div class=\"help-list-item active\" data-target=\"1\" data-help-reveal style=\"--d:0.1s;\">\n <div class=\"item-body\">\n <h3>Control de peso<\/h3>\n <p>Recibe un plan m\u00e9dico personalizado para ayudarte a alcanzar y mantener un peso saludable<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"help-list-item\" data-target=\"2\" data-help-reveal style=\"--d:0.18s;\">\n <div class=\"item-body\">\n <h3>Nutrici\u00f3n para bajar de peso<\/h3>\n <p>Aprende a mejorar tus h\u00e1bitos alimenticios con el acompa\u00f1amiento de profesionales<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"help-list-item\" data-target=\"3\" data-help-reveal style=\"--d:0.26s;\">\n <div class=\"item-body\">\n <h3>Tratamientos m\u00e9dicos para sobrepeso y obesidad<\/h3>\n <p>Conoce las alternativas disponibles para controlar el sobrepeso y las enfermedades relacionadas<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"help-list-item\" data-target=\"4\" data-help-reveal style=\"--d:0.34s;\">\n <div class=\"item-body\">\n <h3>Procedimientos bari\u00e1tricos<\/h3>\n <p>Cuando existe una indicaci\u00f3n m\u00e9dica, contamos con opciones quir\u00fargicas como parte de un tratamiento integral<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"help-list-item\" data-target=\"5\" data-help-reveal style=\"--d:0.42s;\">\n <div class=\"item-body\">\n <h3>Enfermedades asociadas<\/h3>\n <p>Atenci\u00f3n para pacientes con diabetes, hipertensi\u00f3n, apnea del sue\u00f1o, h\u00edgado graso y otros padecimientos relacionados con la obesidad<\/p>\n <\/div>\n <\/div>\n\n <\/div>\n\n <\/div>\n <\/div>\n<\/section>\n\n<script>\n (function() {\n function initInteractiveSection() {\n const section = document.getElementById(\"wp-help-section\");\n if (!section) return;\n\n \/\/ Activar visualizaci\u00f3n segura de los efectos de scroll\n section.classList.add(\"js-ready\");\n\n \/\/ Intersection Observer para animaciones elegantes\n const revealTargets = section.querySelectorAll(\"[data-help-reveal]\");\n if (\"IntersectionObserver\" in window) {\n const io = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add(\"is-visible\");\n io.unobserve(entry.target);\n }\n });\n }, { threshold: 0.05, rootMargin: \"0px 0px -50px 0px\" });\n revealTargets.forEach(el => io.observe(el));\n } else {\n revealTargets.forEach(el => el.classList.add(\"is-visible\"));\n }\n\n \/\/ Cambios interactivos al hacer Hover o Click\n const listItems = section.querySelectorAll('.help-list-item');\n const visualItems = section.querySelectorAll('.visual-item');\n\n listItems.forEach(item => {\n const activateItem = () => {\n const targetId = item.getAttribute('data-target');\n\n listItems.forEach(li => li.classList.remove('active'));\n visualItems.forEach(vi => vi.classList.remove('active'));\n\n item.classList.add('active');\n const matchedVisual = section.querySelector(`.visual-item[data-visual=\"${targetId}\"]`);\n if (matchedVisual) {\n matchedVisual.classList.add('active');\n }\n };\n\n item.addEventListener('mouseenter', activateItem);\n item.addEventListener('click', activateItem);\n });\n }\n\n if (document.readyState === \"loading\") {\n document.addEventListener(\"DOMContentLoaded\", initInteractiveSection);\n } else {\n initInteractiveSection();\n }\n })();\n<\/script>\n\n<style>\n \/* Variables y Estilos Base *\/\n .pro-help-section {\n --wp-c-brand-light: #f3d8d1;\n --wp-c-brand-med: #e8afa7;\n --wp-wp-c-navy: #002842;\n --wp-c-gold: #d2a750;\n --wp-c-gold-dark: #b37e34;\n --wp-c-blue: #245080;\n --wp-c-text-muted: #4e5d78; \/* Un poco m\u00e1s oscuro para mejor contraste en el fondo nuevo *\/\n \n width: 100% !important;\n padding: 120px 24px !important;\n \n \/* NUEVO: Imagen de fondo integrada con overlay degradado *\/\n background-image: \n linear-gradient(135deg, rgba(253, 252, 251, 0.92) 0%, rgba(251, 238, 233, 0.88) 100%), \n url(\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/12.webp\") !important;\n background-size: cover !important;\n background-position: center !important;\n background-attachment: fixed !important; \/* Efecto paralaje sutil *\/\n \n position: relative !important;\n overflow: hidden !important;\n font-family: 'Lexend', sans-serif !important;\n box-sizing: border-box !important;\n }\n\n .pro-help-section * {\n box-sizing: border-box !important;\n }\n\n \/* FORMAS DE FONDO DECORATIVAS (Atenuadas para no saturar con la nueva imagen) *\/\n .help-bg-shapes {\n position: absolute !important;\n inset: 0 !important;\n pointer-events: none !important;\n z-index: 1 !important;\n }\n .help-blob {\n position: absolute !important;\n border-radius: 50% !important;\n filter: blur(100px) !important;\n opacity: 0.15 !important; \/* Reducido para suavidad *\/\n animation: helpBlobFloat 16s ease-in-out infinite;\n }\n .help-blob-1 { width: 400px; height: 400px; top: -100px; left: -100px; background: var(--wp-c-brand-light); }\n .help-blob-2 { width: 350px; height: 350px; bottom: -100px; right: -50px; background: var(--wp-c-brand-med); animation-delay: 4s; }\n .help-blob-3 { width: 250px; height: 250px; top: 40%; left: 30%; background: rgba(36, 80, 128, 0.1); animation-delay: 8s; }\n\n @keyframes helpBlobFloat {\n 0%, 100% { transform: translate(0, 0) scale(1); }\n 50% { transform: translate(20px, -20px) scale(1.03); }\n }\n\n .help-container {\n width: 100% !important;\n max-width: 1200px !important;\n margin: 0 auto !important;\n position: relative !important;\n z-index: 3 !important;\n }\n\n \/* REVELADO MEJORADO *\/\n [data-help-reveal] {\n opacity: 1;\n transform: none;\n transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0s), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0s) !important;\n }\n\n .pro-help-section.js-ready [data-help-reveal] {\n opacity: 0 !important;\n transform: translateY(30px) !important;\n }\n\n .pro-help-section.js-ready [data-help-reveal].is-visible {\n opacity: 1 !important;\n transform: translateY(0) !important;\n }\n\n \/* ENCABEZADO *\/\n .help-header {\n text-align: center !important;\n margin-bottom: 70px !important;\n }\n .help-header h2 {\n font-family: 'Literata', serif !important;\n font-size: clamp(2.2rem, 4.5vw, 2.9rem) !important;\n color: var(--wp-wp-c-navy) !important;\n font-weight: 600 !important;\n margin: 0 0 18px 0 !important;\n text-shadow: 0 2px 10px rgba(0,0,0,0.02);\n }\n .help-divider {\n width: 80px;\n height: 4px;\n background: linear-gradient(90deg, var(--wp-c-gold-dark), var(--wp-c-gold));\n margin: 0 auto;\n border-radius: 2px;\n }\n\n \/* SPLIT LAYOUT *\/\n .help-split-layout {\n display: grid !important;\n grid-template-columns: 1.15fr 1fr !important;\n gap: 60px !important;\n align-items: start !important;\n }\n\n \/* SECCI\u00d3N IZQUIERDA: VISUAL STICKY CON EFECTO VIDRIO *\/\n .help-left-visual {\n position: sticky !important;\n top: 10% !important;\n height: 520px !important;\n border-radius: 28px !important;\n background: rgba(255, 255, 255, 0.75) !important; \/* Semi-transparente *\/\n backdrop-filter: blur(8px) !important; \/* Cristal templado *\/\n -webkit-backdrop-filter: blur(8px) !important;\n box-shadow: 0 30px 60px rgba(0, 40, 66, 0.12) !important;\n border: 1px solid rgba(255, 255, 255, 0.6) !important;\n overflow: hidden !important;\n align-self: start !important;\n }\n\n .visual-sticky-wrapper {\n position: relative !important;\n width: 100% !important;\n height: 100% !important;\n }\n\n \/* Items Visuales *\/\n .visual-item {\n position: absolute !important;\n inset: 0 !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n opacity: 0 !important;\n transform: scale(0.95) !important;\n transition: opacity 0.5s ease-in-out, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;\n pointer-events: none !important;\n z-index: 1 !important;\n }\n\n .visual-item.active {\n opacity: 1 !important;\n transform: scale(1) !important;\n pointer-events: auto !important;\n z-index: 2 !important;\n }\n\n .visual-content-placeholder {\n width: 100% !important;\n height: 100% !important;\n position: relative !important;\n overflow: hidden !important;\n }\n\n .visual-content-placeholder img {\n width: 100% !important;\n height: 100% !important;\n object-fit: cover !important;\n object-position: center !important;\n transition: transform 1.2s ease !important;\n }\n\n .visual-item.active img {\n transform: scale(1.04) !important;\n }\n\n \/* SECCI\u00d3N DERECHA: LISTADO *\/\n .help-right-list {\n display: flex !important;\n flex-direction: column !important;\n gap: 16px !important;\n }\n\n \/* NUEVO: Tarjetas con efecto Glassmorphic *\/\n .help-list-item {\n background: rgba(255, 255, 255, 0.45) !important;\n backdrop-filter: blur(8px) !important;\n -webkit-backdrop-filter: blur(8px) !important;\n border: 1px solid rgba(255, 255, 255, 0.5) !important;\n border-radius: 20px !important;\n padding: 24px 28px !important;\n display: flex !important;\n gap: 0px !important;\n cursor: pointer !important;\n transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;\n position: relative !important;\n }\n\n .help-list-item:hover,\n .help-list-item.active {\n background: rgba(255, 255, 255, 0.92) !important;\n border-color: rgba(232, 175, 167, 0.5) !important; \/* Toque de color rosa en el borde activo *\/\n box-shadow: 0 20px 40px rgba(0, 40, 66, 0.08) !important;\n }\n\n .help-list-item::after {\n content: \"\" !important;\n position: absolute !important;\n left: 0;\n top: 50%;\n transform: translateY(-50%) scaleY(0.3) !important;\n width: 4px !important;\n height: 60% !important;\n background: linear-gradient(to bottom, var(--wp-c-gold), var(--wp-c-blue)) !important;\n border-radius: 0 4px 4px 0 !important;\n opacity: 0 !important;\n transition: all 0.4s ease !important;\n }\n\n .help-list-item.active::after {\n opacity: 1 !important;\n transform: translateY(-50%) scaleY(1) !important;\n }\n\n .item-body {\n width: 100% !important;\n }\n\n .item-body h3 {\n font-family: 'Literata', serif !important;\n font-size: 1.3rem !important;\n color: var(--wp-wp-c-navy) !important;\n font-weight: 600 !important;\n margin: 0 0 8px 0 !important;\n line-height: 1.3 !important;\n }\n\n .item-body p {\n font-size: 0.98rem !important;\n color: var(--wp-c-text-muted) !important;\n line-height: 1.6 !important;\n margin: 0 !important;\n font-weight: 400 !important;\n max-height: 0;\n overflow: hidden;\n opacity: 0;\n transform: translateY(5px);\n transition: max-height 0.4s ease, opacity 0.4s ease, transform 0.4s ease !important;\n }\n\n .help-list-item.active .item-body p {\n max-height: 150px !important;\n opacity: 1 !important;\n transform: translateY(0) !important;\n margin-top: 6px !important;\n }\n\n \/* RESPONSIVIDAD (M\u00d3VIL \/ TABLET) *\/\n @media (max-width: 968px) {\n .pro-help-section {\n background-attachment: scroll !important; \/* Desactiva parallax en m\u00f3viles para mejorar rendimiento *\/\n }\n\n .help-split-layout {\n grid-template-columns: 1fr !important;\n gap: 40px !important;\n }\n\n .help-left-visual {\n position: relative !important;\n top: 0 !important;\n height: 320px !important;\n order: 1 !important;\n }\n\n .help-right-list {\n order: 2 !important;\n }\n\n .help-list-item {\n padding: 20px 22px !important;\n }\n\n .help-list-item::after {\n display: none !important;\n }\n }\n\n @media (max-width: 600px) {\n .pro-help-section {\n padding: 80px 16px !important;\n }\n .help-header {\n margin-bottom: 40px !important;\n }\n .help-left-visual {\n height: 250px !important;\n }\n }\n\n \/* ACCESIBILIDAD *\/\n @media (prefers-reduced-motion: reduce) {\n .help-blob, .visual-item, .help-list-item, [data-help-reveal] {\n animation: none !important;\n transition: none !important;\n }\n [data-help-reveal] {\n opacity: 1 !important;\n transform: none !important;\n }\n }\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e778aaa e-con-full e-flex e-con e-parent\" data-id=\"e778aaa\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a0ec4b5 elementor-widget elementor-widget-html\" data-id=\"a0ec4b5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"nb-appt\">\n\n<style>\n .nb-appt{\n --nb-blush: #f3d8d1;\n --nb-rose: #e8afa7;\n --nb-navy: #002842;\n --nb-gold: #d2a750;\n --nb-gold-deep: #b37e34;\n --nb-blue: #245080;\n --nb-font-display: 'Literata', serif;\n --nb-font-body: 'Lexend', sans-serif;\n\n position:relative;\n overflow:hidden;\n background: linear-gradient(120deg, #001b30 0%, var(--nb-navy) 45%, var(--nb-blue) 100%);\n font-family: var(--nb-font-body);\n box-sizing:border-box;\n border-radius: 0;\n }\n .nb-appt, .nb-appt *{ box-sizing:border-box; }\n\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Literata:ital,opsz,wght@0,7..72,400;0,7..72,500;0,7..72,600;1,7..72,500&family=Lexend:wght@300;400;500;600;700&display=swap');\n\n .nb-appt .nb-appt__glow{\n position:absolute; inset:0; z-index:0; pointer-events:none;\n background:\n radial-gradient(40% 65% at 18% 25%, rgba(210,167,80,.22), transparent 60%),\n radial-gradient(34% 55% at 92% 85%, rgba(232,175,167,.16), transparent 60%);\n animation: nb-appt-glow 14s ease-in-out infinite alternate;\n }\n @keyframes nb-appt-glow{\n 0%{ transform: translate(0,0) scale(1); }\n 100%{ transform: translate(3%,-4%) scale(1.08); }\n }\n\n .nb-appt__wrap{\n position:relative; z-index:1;\n max-width: 1240px;\n margin: 0 auto;\n display:flex;\n flex-wrap:wrap;\n align-items:stretch;\n justify-content: center;\n min-height: 460px;\n }\n\n \/* ---------- image side (IZQUIERDA) ---------- *\/\n .nb-appt__media{\n position:relative;\n flex: 1 1 420px;\n min-height: 320px;\n display:flex;\n align-items:flex-end;\n justify-content: flex-start; \n order:1; \n }\n .nb-appt__media img{\n width:100%;\n max-width: 440px;\n margin: 0; \n display:block;\n object-fit: contain;\n object-position: bottom left; \n filter: drop-shadow(0 20px 30px rgba(0,10,20,.4));\n opacity:0; transform: translateY(30px);\n transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1);\n }\n .nb-appt__media img.nb-visible{ opacity:1; transform:none; }\n\n \/* ---------- text side (DERECHA) ---------- *\/\n .nb-appt__content{\n flex: 1.4 1 480px;\n display:flex;\n align-items:center;\n justify-content: center; \n order:2;\n padding: 3.6rem 2rem;\n }\n .nb-appt__content-inner{\n width: 100%;\n max-width: 520px;\n opacity:0; transform: translateY(18px);\n transition: opacity .8s ease, transform .8s ease;\n }\n .nb-appt__content-inner.nb-visible{ opacity:1; transform:none; }\n\n .nb-appt__eyebrow{\n display:inline-flex; align-items:center; gap:.55rem;\n font-weight:600; font-size:.78rem; letter-spacing:.22em; text-transform:uppercase;\n color: rgba(243,216,209,.8);\n margin-bottom: 1.3rem;\n }\n .nb-appt__eyebrow i{\n width:6px; height:6px; border-radius:50%; background: var(--nb-gold); display:inline-block;\n animation: nb-appt-dot 2s ease-out infinite;\n }\n @keyframes nb-appt-dot{\n 0%{ box-shadow:0 0 0 0 rgba(210,167,80,.55); }\n 70%{ box-shadow:0 0 0 9px rgba(210,167,80,0); }\n 100%{ box-shadow:0 0 0 0 rgba(210,167,80,0); }\n }\n\n .nb-appt__content h2{\n font-family: var(--nb-font-display);\n font-weight:500;\n font-size: clamp(2.1rem, 4vw, 3.1rem);\n line-height:1.2;\n color:#fff;\n margin: 0; \n }\n\n .nb-appt__content h2:empty {\n display: none;\n }\n\n .nb-appt__desc {\n font-size: 1.05rem;\n line-height: 1.6;\n color: rgba(255, 255, 255, 0.85);\n margin: 0 0 2.2rem 0;\n font-weight: 300;\n }\n\n .nb-appt__btn{\n position:relative;\n display:inline-flex;\n align-items:center;\n gap: 0;\n background:#fff;\n color: var(--nb-navy);\n font-family: var(--nb-font-body);\n font-weight:600;\n font-size: 1rem;\n text-decoration:none !important;\n border-radius: 999px;\n padding: .5rem .5rem .5rem 1.6rem;\n box-shadow: 0 18px 36px -16px rgba(0,10,20,.5);\n transition: transform .3s ease, box-shadow .3s ease;\n }\n .nb-appt__btn:hover{\n transform: translateY(-3px);\n box-shadow: 0 24px 44px -16px rgba(0,10,20,.6);\n }\n .nb-appt__btn-icon{\n display:inline-flex; align-items:center; justify-content:center;\n width: 42px; height:42px;\n border-radius: 50%;\n background: linear-gradient(135deg, var(--nb-gold) 0%, var(--nb-gold-deep) 100%);\n color:#fff;\n margin-left: 1.1rem;\n transition: transform .35s ease, background .3s ease;\n }\n .nb-appt__btn:hover .nb-appt__btn-icon{\n transform: translateX(4px) rotate(0deg);\n background: var(--nb-navy);\n }\n .nb-appt__btn-icon svg{ width:18px; height:18px; }\n\n \/* ---------- decorative floating line-icons ---------- *\/\n .nb-appt__deco{\n position:absolute;\n z-index:1;\n opacity:.5;\n animation: nb-appt-float 7s ease-in-out infinite;\n pointer-events:none;\n }\n @keyframes nb-appt-float{\n 0%,100%{ transform: translateY(0) rotate(0deg); }\n 50%{ transform: translateY(-14px) rotate(6deg); }\n }\n\n \/* Ajustes espec\u00edficos para escritorio (Pantallas grandes) *\/\n @media (min-width: 881px){\n .nb-appt__media{\n margin-left: -60px; \/* Empuja la imagen visiblemente hacia el borde izquierdo *\/\n }\n }\n\n \/* Vista responsiva ultra optimizada (Celulares y Tablets) *\/\n @media (max-width: 880px){\n .nb-appt__wrap{ \n flex-direction: column; \n min-height: auto !important; \/* Quitamos cualquier altura m\u00ednima forzada *\/\n }\n \n \/* Evita que el contenedor de la imagen se estire verticalmente *\/\n .nb-appt__media{ \n order: 1; \n flex: 0 0 auto !important; \n min-height: auto !important;\n padding-top: 2rem;\n padding-bottom: 0;\n justify-content: center; \n }\n \n \/* Imagen m\u00e1s peque\u00f1a y compacta con difuminado suave en la base *\/\n .nb-appt__media img{ \n margin: 0 auto; \n object-position: bottom center; \n max-width: 210px; \/* Tama\u00f1o ideal en celular para reducir la altura *\/\n height: auto;\n -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);\n mask-image: linear-gradient(to bottom, black 70%, transparent 100%);\n }\n \n \/* Evita que el contenedor del texto se estire verticalmente y reduce espacios *\/\n .nb-appt__content{ \n order: 2; \n flex: 0 0 auto !important; \n padding: 1rem 1.5rem 2rem; \/* Padding reducido al m\u00ednimo *\/\n text-align: center; \n }\n .nb-appt__content-inner{ margin: 0 auto; }\n .nb-appt__eyebrow{ justify-content: center; }\n .nb-appt__btn { align-self: center; }\n .nb-appt__desc { \n font-size: 0.95rem; \n margin: 0 0 1.2rem 0; \/* Menos espacio entre texto y bot\u00f3n *\/\n }\n }\n\n @media (max-width: 520px){\n .nb-appt__content h2{ font-size:1.9rem; }\n .nb-appt__desc { font-size: 0.95rem; }\n }\n\n @media (prefers-reduced-motion: reduce){\n .nb-appt *{ animation:none !important; transition:none !important; }\n }\n<\/style>\n\n<div class=\"nb-appt__glow\"><\/div>\n\n\n<svg class=\"nb-appt__deco\" style=\"top:9%; left:4%; width:46px; height:46px; animation-delay:0s;\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#f3d8d1\" stroke-width=\"1.3\">\n <path d=\"M4 12a8 8 0 0 1 8-8c0 4.4-3.6 8-8 8Z\"\/><path d=\"M4 12c0-1 .3-2 .8-3\"\/>\n<\/svg>\n<svg class=\"nb-appt__deco\" style=\"top:14%; right:6%; width:40px; height:40px; animation-delay:1.6s;\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#d2a750\" stroke-width=\"1.3\">\n <path d=\"M4 15c0-5 4-9 9-9-.5 6-4.5 9-9 9Z\"\/>\n<\/svg>\n<svg class=\"nb-appt__deco\" style=\"bottom:12%; right:9%; width:38px; height:38px; animation-delay:3.2s;\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#e8afa7\" stroke-width=\"1.3\">\n <circle cx=\"9\" cy=\"15\" r=\"3\"\/><circle cx=\"15\" cy=\"16\" r=\"3\"\/><path d=\"M12 9v3M9 12l3-3 3 3\"\/>\n<\/svg>\n\n<div class=\"nb-appt__wrap\">\n\n \n <div class=\"nb-appt__media\">\n <img decoding=\"async\" data-nb-reveal src=\"https:\/\/static.vecteezy.com\/system\/resources\/thumbnails\/046\/319\/214\/small_2x\/smiling-nutritionist-holding-fresh-vegetables-and-clipboard-on-transparent-background-png.png\" alt=\"Nutricionista Satisfecha\">\n <\/div>\n\n \n <div class=\"nb-appt__content\">\n <div class=\"nb-appt__content-inner\" data-nb-reveal>\n <h2><\/h2>\n <p class=\"nb-appt__desc\">Despu\u00e9s de tu valoraci\u00f3n, te ayudaremos a identificar la alternativa que mejor se adapte a tus necesidades, objetivos y estado de salud<\/p>\n \n <a href=\"https:\/\/wa.link\/zvs595\" target=\"_blank\" class=\"nb-appt__btn\">\n <span>Conocer opciones<\/span>\n <span class=\"nb-appt__btn-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" class=\"help-btn-arrow\">\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/>\n <polyline points=\"13 6 19 12 13 18\"\/>\n <\/svg>\n <\/span>\n <\/a>\n <\/div>\n <\/div>\n\n<\/div>\n<\/div>\n\n<script>\n(function(){\n var els = document.querySelectorAll('.nb-appt [data-nb-reveal]');\n if (!('IntersectionObserver' in window)) {\n els.forEach(function(el){ el.classList.add('nb-visible'); });\n return;\n }\n var io = new IntersectionObserver(function(entries){\n entries.forEach(function(entry){\n if (entry.isIntersecting){\n entry.target.classList.add('nb-visible');\n io.unobserve(entry.target);\n }\n });\n }, { threshold: 0.15 });\n els.forEach(function(el){ io.observe(el); });\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9b290f5 e-con-full e-flex e-con e-parent\" data-id=\"9b290f5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f014003 elementor-widget elementor-widget-html\" data-id=\"f014003\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Literata:ital,opsz,wght@0,7..72,400;0,7..72,600;1,7..72,400&family=Lexend:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\">\n\n<section class=\"pro-team-section\" id=\"sobre-nosotros\">\n \n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/plato-comida.webp\" alt=\"Plato de comida saludable\" class=\"floating-food-plate\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/pesa.webp\" alt=\"B\u00e1scula de cocina\" class=\"floating-scale\">\n\n <div class=\"team-bg-icons\">\n <i class=\"fa-solid fa-leaf team-icon-b1\"><\/i>\n <i class=\"fa-solid fa-apple-whole team-icon-b2\"><\/i>\n <i class=\"fa-solid fa-dumbbell team-icon-b3\"><\/i>\n <i class=\"fa-solid fa-bottle-water team-icon-b4\"><\/i>\n <\/div>\n\n <div class=\"team-container\">\n \n \n <div class=\"team-header\">\n <span class=\"team-badge\">Sobre nosotros<\/span>\n <h2>Conoce al equipo de <span class=\"text-brand\">Se les acab\u00f3 su gordito<\/span>, Cl\u00ednica especialista en nutrici\u00f3n y bariatr\u00eda en la CDMX<\/h2>\n <div class=\"team-divider\"><\/div>\n <p class=\"team-lead\">Creemos que cada persona merece una atenci\u00f3n cercana, respetuosa y basada en evidencia m\u00e9dica<\/p>\n <p class=\"team-subtext\">Nuestro equipo est\u00e1 formado por especialistas comprometidos con brindar un acompa\u00f1amiento integral desde la primera consulta. Nos enfocamos en escucharte, resolver tus dudas y ayudarte a tomar decisiones informadas sobre tu salud<\/p>\n <\/div>\n\n \n <div class=\"team-slider-wrapper\">\n \n \n <button class=\"team-slider-arrow prev\" aria-label=\"Anterior\">❮<\/button>\n <button class=\"team-slider-arrow next\" aria-label=\"Siguiente\">❯<\/button>\n\n \n <div class=\"team-slider-track\">\n \n \n <div class=\"team-card active\">\n <div class=\"team-card-inner\">\n <div class=\"team-member-photo\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/IMG-20230227-WA0039.webp\" alt=\"Dr. Oscar S\u00e1nchez Moreno\">\n <span class=\"specialty-tag\">Bariatr\u00eda Endosc\u00f3pica<\/span>\n <\/div>\n <div class=\"team-member-info\">\n <h3>Dr. Oscar S\u00e1nchez Moreno<\/h3>\n <h4 class=\"member-role\">Especialista en Endoscopia Bari\u00e1trica y Cirug\u00eda Endosc\u00f3pica<\/h4>\n \n <div class=\"member-credentials\">\n <span><strong>C\u00e9dula Profesional:<\/strong> 5862996<\/span>\n <span><strong>C\u00e9dula de Especialidad:<\/strong> 09642967<\/span>\n <\/div>\n \n <p class=\"member-bio\">Se enfoca en procedimientos bari\u00e1tricos endosc\u00f3picos y t\u00e9cnicas de m\u00ednima invasi\u00f3n para el tratamiento del sobrepeso y la obesidad. Tambi\u00e9n brinda atenci\u00f3n a pacientes con complicaciones posteriores a cirug\u00eda bari\u00e1trica y participa en el manejo integral de la salud metab\u00f3lica<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"team-card\">\n <div class=\"team-card-inner\">\n <div class=\"team-member-photo\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2025\/12\/El-Gordito-1.webp\" alt=\"Dr. Rodrigo Rangel Vel\u00e1zquez\">\n <span class=\"specialty-tag\">Cirug\u00eda Bari\u00e1trica<\/span>\n <\/div>\n <div class=\"team-member-info\">\n <h3>Dr. Rodrigo Rangel Vel\u00e1zquez<\/h3>\n <h4 class=\"member-role\">M\u00e9dico Cirujano y Especialista Bariatra<\/h4>\n \n <div class=\"member-credentials\">\n <span><strong>C\u00e9dula Profesional:<\/strong> 7401327<\/span>\n <span><strong>C\u00e9dula de Especialidad:<\/strong> 11515384<\/span>\n <span><strong>Certificaci\u00f3n en Bariatr\u00eda:<\/strong> B19004319<\/span>\n <\/div>\n \n <p class=\"member-bio\">Brinda atenci\u00f3n integral para el tratamiento del sobrepeso y la obesidad mediante estrategias personalizadas que pueden incluir tratamiento cl\u00ednico, procedimientos bari\u00e1tricos y seguimiento continuo, con el objetivo de favorecer cambios sostenibles en la salud y el bienestar del paciente<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"team-card\">\n <div class=\"team-card-inner\">\n <div class=\"team-member-photo\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2025\/12\/El-Gordito-3.webp\" alt=\"Dra. Mar\u00eda Azucena L\u00f3pez Santill\u00e1n\">\n <span class=\"specialty-tag\">Medicina y Nutrici\u00f3n<\/span>\n <\/div>\n <div class=\"team-member-info\">\n <h3>Dra. Mar\u00eda Azucena L\u00f3pez Santill\u00e1n<\/h3>\n <h4 class=\"member-role\">Especialista en Medicina Familiar y Nutrici\u00f3n<\/h4>\n \n <div class=\"member-credentials\">\n <span><strong>C\u00e9dula Profesional:<\/strong> 09251690<\/span>\n <span><strong>C\u00e9dula de Especialidad:<\/strong> 11974797<\/span>\n <\/div>\n \n <p class=\"member-bio\">Acompa\u00f1a a los pacientes en el manejo del peso y la adopci\u00f3n de h\u00e1bitos saludables mediante planes de alimentaci\u00f3n personalizados, educaci\u00f3n nutricional y seguimiento m\u00e9dico, adaptando cada estrategia a sus necesidades y estilo de vida<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"team-card\">\n <div class=\"team-card-inner\">\n <div class=\"team-member-photo\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/Dra.-Daniela-Me\u0301ndez-Rodri\u0301guez.webp\" alt=\"Dra. Daniela M\u00e9ndez Rodr\u00edguez\">\n <span class=\"specialty-tag\">Psicolog\u00eda<\/span>\n <\/div>\n <div class=\"team-member-info\">\n <h3>Dra. Daniela M\u00e9ndez Rodr\u00edguez<\/h3>\n <h4 class=\"member-role\">Psic\u00f3loga<\/h4>\n \n <div class=\"member-credentials\">\n <span><strong>C\u00e9dula Profesional:<\/strong> 11520291<\/span>\n <\/div>\n \n <p class=\"member-bio\">Brinda acompa\u00f1amiento psicol\u00f3gico enfocado en el cambio de h\u00e1bitos, la relaci\u00f3n con la alimentaci\u00f3n, el manejo de la ansiedad y el fortalecimiento de la motivaci\u00f3n. Su intervenci\u00f3n forma parte del abordaje integral para favorecer cambios sostenibles en el bienestar y la calidad de vida<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n\n \n <div class=\"team-slider-dots\"><\/div>\n <\/div>\n\n <\/div>\n\n \n\n \n <div class=\"custom-shape-divider-bottom-1784060107\">\n <svg data-name=\"Layer 1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 1200 120\" preserveAspectRatio=\"none\">\n <path d=\"M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z\" class=\"shape-fill\"><\/path>\n <\/svg>\n <\/div>\n<\/section>\n\n\n<script>\n document.addEventListener(\"DOMContentLoaded\", function() {\n const track = document.querySelector(\".team-slider-track\");\n const cards = document.querySelectorAll(\".team-card\");\n const prevBtn = document.querySelector(\".team-slider-arrow.prev\");\n const nextBtn = document.querySelector(\".team-slider-arrow.next\");\n const dotsContainer = document.querySelector(\".team-slider-dots\");\n \n let currentIndex = 0;\n let slideInterval;\n const totalSlides = cards.length;\n\n \/\/ Generar puntos indicadores (Dots)\n cards.forEach((_, index) => {\n const dot = document.createElement(\"div\");\n dot.classList.add(\"team-dot\");\n if (index === 0) dot.classList.add(\"active\");\n dot.addEventListener(\"click\", () => goToSlide(index));\n dotsContainer.appendChild(dot);\n });\n\n const dots = document.querySelectorAll(\".team-dot\");\n\n function updateSlider() {\n cards.forEach((card, index) => {\n card.classList.remove(\"active\", \"prev-slide\", \"next-slide\");\n if (index === currentIndex) {\n card.classList.add(\"active\");\n } else if (index === (currentIndex - 1 + totalSlides) % totalSlides) {\n card.classList.add(\"prev-slide\");\n } else if (index === (currentIndex + 1) % totalSlides) {\n card.classList.add(\"next-slide\");\n }\n });\n\n dots.forEach((dot, index) => {\n dot.classList.toggle(\"active\", index === currentIndex);\n });\n \n \/\/ Efecto de traslaci\u00f3n responsivo en m\u00f3viles\n if(window.innerWidth <= 768) {\n track.style.transform = `translateX(-${currentIndex * 100}%)`;\n } else {\n track.style.transform = \"none\";\n }\n }\n\n function nextSlide() {\n currentIndex = (currentIndex + 1) % totalSlides;\n updateSlider();\n }\n\n function prevSlide() {\n currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;\n updateSlider();\n }\n\n function goToSlide(index) {\n currentIndex = index;\n updateSlider();\n resetAutoplay();\n }\n\n function startAutoplay() {\n slideInterval = setInterval(nextSlide, 6000); \/\/ Cambia cada 6 segundos\n }\n\n function resetAutoplay() {\n clearInterval(slideInterval);\n startAutoplay();\n }\n\n \/\/ Asignaci\u00f3n de eventos\n nextBtn.addEventListener(\"click\", () => { nextSlide(); resetAutoplay(); });\n prevBtn.addEventListener(\"click\", () => { prevSlide(); resetAutoplay(); });\n\n \/\/ Pausar con el mouse encima\n const wrapper = document.querySelector(\".team-slider-wrapper\");\n wrapper.addEventListener(\"mouseenter\", () => clearInterval(slideInterval));\n wrapper.addEventListener(\"mouseleave\", startAutoplay);\n\n \/\/ Soporte Swipe para m\u00f3viles\n let startX = 0;\n wrapper.addEventListener(\"touchstart\", e => startX = e.touches[0].clientX, {passive: true});\n wrapper.addEventListener(\"touchend\", e => {\n let diffX = startX - e.changedTouches[0].clientX;\n if (Math.abs(diffX) > 50) {\n if (diffX > 0) nextSlide(); else prevSlide();\n resetAutoplay();\n }\n }, {passive: true});\n\n \/\/ Inicializar\n startAutoplay();\n updateSlider();\n window.addEventListener(\"resize\", updateSlider);\n });\n<\/script>\n\n<style>\n \/* PALETA DE COLORES *\/\n .pro-team-section {\n --c-brand-light: #f3d8d1;\n --c-brand-med: #e8afa7;\n --c-navy: #002842;\n --c-gold: #d2a750;\n --c-gold-dark: #b37e34;\n --c-blue: #245080;\n --c-bg-clean: #FDFCFB;\n }\n\n \/* ESTILOS DE LA SECCI\u00d3N *\/\n .pro-team-section {\n width: 100% !important;\n padding: 50px 24px !important; \/* Mantenemos padding amplio para que no se encima la nueva onda *\/\n background: var(--c-bg-clean) !important;\n position: relative !important;\n overflow: hidden !important;\n font-family: 'Lexend', sans-serif !important;\n }\n\n \/* ESTILOS DE NUEVAS IM\u00c1GENES DECORATIVAS Y FLOTANTES *\/\n .floating-food-plate {\n position: absolute !important;\n top: 25% !important;\n right: -100px !important; \/* Sobresale parcialmente del lado derecho *\/\n width: 320px !important;\n height: auto !important;\n z-index: 2 !important; \/* Detr\u00e1s de las tarjetas de doctores pero encima del fondo *\/\n pointer-events: none !important;\n transform-origin: center !important;\n animation: spinSlow 35s linear infinite !important;\n opacity: 0.85 !important;\n transition: opacity 0.3s ease !important;\n }\n\n .floating-scale {\n position: absolute !important;\n bottom: 12% !important;\n left: -60px !important; \/* Se asoma del lado izquierdo *\/\n width: 200px !important;\n height: auto !important;\n z-index: 2 !important;\n pointer-events: none !important;\n opacity: 0.9 !important;\n animation: floatAndNudge 8s ease-in-out infinite !important;\n }\n\n \/* ANIMACIONES NUEVAS *\/\n @keyframes spinSlow {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n\n @keyframes floatAndNudge {\n 0%, 100% {\n transform: translateY(0) rotate(0deg);\n }\n 50% {\n transform: translateY(-15px) rotate(3deg) translateX(10px); \/* Flota y se asoma levemente hacia la derecha *\/\n }\n }\n\n \/* CONTENEDOR Y COLORES DEL DIVISOR VECTORIAL SUPERIOR *\/\n .team-wave-top {\n position: absolute !important;\n top: -1px !important;\n left: 0 !important;\n width: 100% !important;\n overflow: hidden !important;\n line-height: 0 !important;\n z-index: 4 !important;\n }\n .team-wave-top svg {\n position: relative !important;\n display: block !important;\n width: calc(100% + 1.3px) !important;\n height: 70px !important;\n }\n .wave-ext-white {\n fill: #ffffff !important;\n }\n .wave-line-dark {\n fill: var(--c-navy) !important;\n }\n\n \/* ESTILOS DEL CONECTOR FLOTANTE OBLIGATORIOS (OPCI\u00d3N 3) *\/\n .team-connector-badge {\n position: absolute !important;\n bottom: 85px !important; \/* Posicionado estrat\u00e9gicamente en la ca\u00edda de la onda *\/\n left: 50% !important;\n transform: translateX(-50%) !important;\n background: #ffffff !important;\n padding: 12px 28px !important;\n border-radius: 30px !important;\n box-shadow: 0 10px 30px rgba(0, 40, 66, 0.08) !important;\n border: 1px solid var(--c-brand-light) !important;\n z-index: 5 !important;\n display: flex !important;\n align-items: center !important;\n gap: 10px !important;\n white-space: nowrap !important;\n transition: all 0.3s ease !important;\n }\n\n .team-connector-badge span {\n font-size: 0.88rem !important;\n color: var(--c-navy) !important;\n font-weight: 500 !important;\n letter-spacing: 0.3px !important;\n }\n\n .team-connector-badge i {\n color: var(--c-gold) !important;\n font-size: 0.75rem !important;\n }\n\n \/* NUEVOS ESTILOS DEL DIVISOR INFERIOR PERSONALIZADO *\/\n .custom-shape-divider-bottom-1784060107 {\n position: absolute !important;\n bottom: 0 !important;\n left: 0 !important;\n width: 100% !important;\n overflow: hidden !important;\n line-height: 0 !important;\n z-index: 4 !important;\n }\n\n .custom-shape-divider-bottom-1784060107 svg {\n position: relative !important;\n display: block !important;\n width: calc(100% + 1.3px) !important;\n height: 110px !important;\n }\n\n .custom-shape-divider-bottom-1784060107 .shape-fill {\n fill: #FFFFFF !important;\n }\n\n \/* CAPA DE ICONOS EN SEGUNDO PLANO *\/\n .team-bg-icons {\n position: absolute !important;\n top: 0; left: 0; width: 100%; height: 100%;\n pointer-events: none !important;\n z-index: 1 !important;\n }\n \n .team-bg-icons i {\n position: absolute !important;\n color: var(--c-brand-med) !important;\n opacity: 0.12 !important;\n font-size: 3.5rem !important;\n animation: teamFloat 10s ease-in-out infinite;\n }\n \n .team-icon-b1 { top: 16%; left: 6%; animation-delay: 0s; }\n .team-icon-b2 { bottom: 18%; left: 8%; animation-delay: 2s; font-size: 4.5rem !important; }\n .team-icon-b3 { top: 22%; right: 7%; animation-delay: 1s; }\n .team-icon-b4 { bottom: 15%; right: 9%; animation-delay: 3s; }\n\n @keyframes teamFloat {\n 0%, 100% { transform: translateY(0) rotate(0deg); }\n 50% { transform: translateY(-12px) rotate(6deg); }\n }\n\n .team-container {\n width: 100% !important;\n max-width: 1200px !important;\n margin: 0 auto !important;\n position: relative !important;\n z-index: 3 !important;\n }\n\n \/* ENCABEZADO *\/\n .team-header {\n text-align: center !important;\n max-width: 850px !important;\n margin: 0 auto 60px !important;\n }\n\n .team-badge {\n display: inline-block !important;\n padding: 6px 18px !important;\n background: var(--c-brand-light) !important;\n color: var(--c-navy) !important;\n border: 1px solid var(--c-brand-med) !important;\n border-radius: 30px !important;\n font-size: 0.75rem !important;\n font-weight: 600 !important;\n letter-spacing: 2px !important;\n \n margin-bottom: 20px !important;\n }\n\n .team-header h2 {\n font-family: 'Literata', serif !important;\n font-size: clamp(1.85rem, 4vw, 2.6rem) !important;\n color: var(--c-navy) !important;\n line-height: 1.3 !important;\n font-weight: 600 !important;\n margin: 0 0 20px 0 !important;\n }\n\n .text-brand { color: var(--c-blue) !important; }\n\n .team-divider {\n width: 70px !important;\n height: 4px !important;\n background: var(--c-gold) !important;\n margin: 0 auto 25px !important;\n border-radius: 2px !important;\n }\n\n .team-lead {\n font-size: 1.25rem !important;\n font-weight: 500 !important;\n color: var(--c-navy) !important;\n line-height: 1.5 !important;\n margin-bottom: 15px !important;\n }\n\n .team-subtext {\n font-size: 1.05rem !important;\n font-weight: 300 !important;\n color: #4A5568 !important;\n line-height: 1.65 !important;\n }\n\n \/* CONTENEDOR DEL SLIDER *\/\n .team-slider-wrapper {\n position: relative !important;\n width: 100% !important;\n padding: 20px 0 !important;\n }\n\n .team-slider-track {\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n position: relative !important;\n min-height: 460px !important;\n width: 100% !important;\n }\n\n \/* TARJETAS DEL EQUIPO *\/\n .team-card {\n position: absolute !important;\n width: 100% !important;\n max-width: 850px !important;\n opacity: 0 !important;\n pointer-events: none !important;\n transform: scale(0.8) translateX(0) !important;\n z-index: 1 !important;\n transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;\n }\n\n .team-card.active {\n opacity: 1 !important;\n pointer-events: auto !important;\n transform: scale(1) translateX(0) !important;\n z-index: 10 !important;\n }\n\n .team-card.prev-slide {\n opacity: 0.4 !important;\n transform: scale(0.85) translateX(-25%) !important;\n z-index: 5 !important;\n }\n\n .team-card.next-slide {\n opacity: 0.4 !important;\n transform: scale(0.85) translateX(25%) !important;\n z-index: 5 !important;\n }\n\n .team-card-inner {\n background: #ffffff !important;\n border: 1px solid rgba(0, 40, 66, 0.08) !important;\n border-radius: 20px !important;\n box-shadow: 0 20px 40px rgba(0, 40, 66, 0.04) !important;\n display: grid !important;\n grid-template-columns: 280px 1fr !important;\n overflow: hidden !important;\n transition: box-shadow 0.3s ease !important;\n }\n\n .team-card.active:hover .team-card-inner {\n box-shadow: 0 30px 60px rgba(0, 40, 66, 0.1) !important;\n }\n\n \/* FOTO DE PERFIL *\/\n .team-member-photo {\n width: 100% !important;\n height: 100% !important;\n min-height: 340px !important;\n background: var(--c-brand-light) !important;\n position: relative !important;\n overflow: hidden !important;\n }\n\n .team-member-photo img {\n width: 100% !important;\n height: 100% !important;\n object-fit: cover !important;\n display: block !important;\n }\n\n .specialty-tag {\n position: absolute !important;\n bottom: 16px !important;\n left: 16px !important;\n background: var(--c-navy) !important;\n color: #ffffff !important;\n padding: 5px 14px !important;\n font-size: 0.75rem !important;\n font-weight: 500 !important;\n border-radius: 30px !important;\n box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;\n z-index: 5 !important;\n }\n\n \/* INFORMACI\u00d3N DEL DOCTOR *\/\n .team-member-info {\n padding: 40px !important;\n display: flex !important;\n flex-direction: column !important;\n justify-content: center !important;\n text-align: left !important;\n }\n\n .team-member-info h3 {\n font-family: 'Literata', serif !important;\n font-size: 1.6rem !important;\n color: var(--c-navy) !important;\n margin: 0 0 6px 0 !important;\n font-weight: 600 !important;\n }\n\n .member-role {\n font-size: 0.95rem !important;\n color: var(--c-gold-dark) !important;\n font-weight: 500 !important;\n margin: 0 0 16px 0 !important;\n line-height: 1.4 !important;\n }\n\n .member-credentials {\n display: flex !important;\n flex-direction: column !important;\n gap: 4px !important;\n padding: 10px 14px !important;\n background: rgba(243, 216, 209, 0.3) !important;\n border-left: 3px solid var(--c-brand-med) !important;\n margin-bottom: 20px !important;\n border-radius: 0 6px 6px 0 !important;\n }\n\n .member-credentials span {\n font-size: 0.8rem !important;\n color: var(--c-navy) !important;\n }\n\n .member-bio {\n font-size: 0.92rem !important;\n color: #4A5568 !important;\n line-height: 1.6 !important;\n margin: 0 !important;\n font-weight: 300 !important;\n }\n\n \/* BOTONES DE NAVEGACI\u00d3N (FLECHAS) *\/\n .team-slider-arrow {\n position: absolute !important;\n top: 50% !important;\n transform: translateY(-50%) !important;\n width: 50px !important;\n height: 50px !important;\n background: #ffffff !important;\n border: 2px solid var(--c-navy) !important;\n border-radius: 50px !important;\n color: var(--c-navy) !important;\n font-size: 1.1rem !important;\n cursor: pointer !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n z-index: 20 !important;\n box-shadow: 3px 3px 0px var(--c-navy) !important;\n transition: all 0.2s ease !important;\n }\n\n .team-slider-arrow:hover {\n background: var(--c-navy) !important;\n color: #ffffff !important;\n box-shadow: 0px 0px 0px var(--c-navy) !important;\n transform: translateY(-50%) translate(3px, 3px) !important;\n }\n\n .team-slider-arrow.prev { left: -10px !important; }\n .team-slider-arrow.next { right: -10px !important; }\n\n \/* INDICADORES DE PUNTOS (DOTS) *\/\n .team-slider-dots {\n display: flex !important;\n justify-content: center !important;\n gap: 12px !important;\n margin-top: 35px !important;\n }\n\n .team-dot {\n width: 10px !important;\n height: 10px !important;\n background: var(--c-brand-med) !important;\n border-radius: 50px !important;\n cursor: pointer !important;\n transition: all 0.3s ease !important;\n opacity: 0.6 !important;\n }\n\n .team-dot.active {\n width: 28px !important;\n background: var(--c-blue) !important;\n opacity: 1 !important;\n }\n\n \/* AJUSTES RESPONSIVOS *\/\n @media (max-width: 1200px) {\n .floating-food-plate {\n width: 250px !important;\n right: -80px !important;\n }\n .floating-scale {\n width: 160px !important;\n left: -40px !important;\n }\n }\n\n @media (max-width: 1024px) {\n .team-card.prev-slide,\n .team-card.next-slide {\n opacity: 0 !important;\n }\n .team-slider-arrow.prev { left: 10px !important; }\n .team-slider-arrow.next { right: 10px !important; }\n \n \/* Reducci\u00f3n sutil de elementos flotantes en resoluciones medianas *\/\n .floating-food-plate {\n width: 180px !important;\n right: -50px !important;\n opacity: 0.4 !important; \/* M\u00e1s transparente para que no interfiera *\/\n }\n .floating-scale {\n width: 120px !important;\n left: -30px !important;\n opacity: 0.4 !important;\n }\n }\n\n @media (max-width: 768px) {\n .pro-team-section { padding: 100px 16px !important; }\n .custom-shape-divider-bottom-1784060107 svg { height: 60px !important; } \/* Suavizado en m\u00f3viles *\/\n \n \/* En pantallas m\u00f3viles ocultamos para priorizar la usabilidad o las hacemos diminutas en las esquinas *\/\n .floating-food-plate {\n width: 110px !important;\n right: -30px !important;\n top: 15% !important;\n opacity: 0.3 !important;\n }\n .floating-scale {\n width: 80px !important;\n left: -20px !important;\n bottom: 5% !important;\n opacity: 0.3 !important;\n }\n\n \/* Ajuste del elemento conector flotante en m\u00f3viles *\/\n .team-connector-badge {\n bottom: 45px !important; \n padding: 8px 18px !important;\n max-width: 85%;\n }\n .team-connector-badge span {\n font-size: 0.78rem !important;\n }\n\n .team-slider-track {\n display: flex !important;\n justify-content: flex-start !important;\n align-items: stretch !important;\n min-height: auto !important;\n transition: transform 0.5s ease-in-out !important;\n position: relative !important;\n }\n\n .team-card {\n position: relative !important;\n flex-shrink: 0 !important;\n opacity: 1 !important;\n pointer-events: auto !important;\n transform: none !important;\n padding: 0 8px !important;\n }\n\n .team-card-inner {\n grid-template-columns: 1fr !important;\n border-radius: 16px !important;\n }\n\n .team-member-photo {\n min-height: 260px !important;\n height: 260px !important;\n }\n\n .team-member-info {\n padding: 24px !important;\n }\n\n .team-slider-arrow {\n display: none !important;\n }\n \n .team-slider-dots { margin-top: 24px !important; }\n }\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-cafafcf e-con-full e-flex e-con e-parent\" data-id=\"cafafcf\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c5d5289 elementor-widget elementor-widget-html\" data-id=\"c5d5289\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Literata:ital,opsz,wght@0,7..72,400;0,7..72,600;1,7..72,400&family=Lexend:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\">\n\n<section class=\"exclusive-gallery-section\">\n \n \n <div class=\"bg-gallery-icons\">\n <i class=\"fa-solid fa-apple-whole gall-pattern-icon icon-g1\" title=\"Nutrici\u00f3n \/ Manzana\"><\/i>\n <i class=\"fa-solid fa-carrot gall-pattern-icon icon-g2\" title=\"Alimentaci\u00f3n \/ Verduras\"><\/i>\n <i class=\"fa-solid fa-bottle-water gall-pattern-icon icon-g3\" title=\"Hidrataci\u00f3n \/ Agua\"><\/i>\n <i class=\"fa-solid fa-dumbbell gall-pattern-icon icon-g4\" title=\"Estilo de vida \/ Deporte\"><\/i>\n <i class=\"fa-solid fa-leaf gall-pattern-icon icon-g5\" title=\"Salud \/ Bienestar\"><\/i>\n <\/div>\n \n <div class=\"custom-shape-divider-top-1782867776\">\n <svg data-name=\"Layer 1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 1200 120\" preserveAspectRatio=\"none\">\n <path d=\"M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z\" class=\"shape-fill\"><\/path>\n <\/svg>\n <\/div>\n\n <div class=\"gallery-container\">\n \n <div class=\"header-inst\">\n <div class=\"badge-inst\">\n \n Instalaciones\n <\/div>\n\n <h2>\n Un espacio pensado para tu <span class=\"highlight-brand\">atenci\u00f3n<\/span>\n <\/h2>\n\n <div class=\"divider-inst\"><\/div>\n <\/div>\n\n <div class=\"exclusive-marquee-container\">\n <div class=\"exclusive-marquee-track\">\n \n \n <div class=\"exclusiv-angular-card\">\n <div class=\"exclusiv-image-frame\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/Tratamientos-me\u0301dicos.webp\" alt=\"Instalaciones 1\">\n <\/div>\n <\/div>\n\n <div class=\"exclusiv-angular-card\">\n <div class=\"exclusiv-image-frame\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/Nutricio\u0301n-para-bajar-de-peso-1.webp\" alt=\"Instalaciones 2\">\n <\/div>\n <\/div>\n\n <div class=\"exclusiv-angular-card\">\n <div class=\"exclusiv-image-frame\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/8681.webp\" alt=\"Instalaciones 3\">\n <\/div>\n <\/div>\n\n <div class=\"exclusiv-angular-card\">\n <div class=\"exclusiv-image-frame\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2025\/12\/Nutrae-Resize-04.webp\" alt=\"Instalaciones 4\">\n <\/div>\n <\/div>\n\n \n <div class=\"exclusiv-angular-card\">\n <div class=\"exclusiv-image-frame\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/Tratamientos-me\u0301dicos.webp\" alt=\"Instalaciones 1\">\n <\/div>\n <\/div>\n\n <div class=\"exclusiv-angular-card\">\n <div class=\"exclusiv-image-frame\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/Nutricio\u0301n-para-bajar-de-peso-1.webp\" alt=\"Instalaciones 2\">\n <\/div>\n <\/div>\n\n <div class=\"exclusiv-angular-card\">\n <div class=\"exclusiv-image-frame\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/8681.webp\" alt=\"Instalaciones 3\">\n <\/div>\n <\/div>\n\n <div class=\"exclusiv-angular-card\">\n <div class=\"exclusiv-image-frame\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2025\/12\/Nutrae-Resize-04.webp\" alt=\"Instalaciones 4\">\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n\n <div class=\"exclusive-action-box\">\n <p>\n Queremos que te sientas c\u00f3modo desde el momento en que llegas. Nuestras instalaciones est\u00e1n preparadas para brindar atenci\u00f3n m\u00e9dica en un ambiente profesional y confortable\n <\/p>\n\n <div class=\"qro-fac-cta-wrap\">\n <a href=\"https:\/\/wa.link\/zvs595\" target=\"_blank\" class=\"qro-fac-cta\">\n <i class=\"fa-regular fa-calendar-check\"><\/i>\n Quiero agendar\n <\/a>\n <\/div>\n <\/div>\n \n <\/div>\n\n <div class=\"custom-shape-divider-bottom-1782867776\">\n <svg data-name=\"Layer 1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 1200 120\" preserveAspectRatio=\"none\">\n <path d=\"M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z\" class=\"shape-fill\"><\/path>\n <\/svg>\n <\/div>\n<\/section>\n\n<style>\n \/* ===== PALETA DE COLORES REQUERIDA ===== *\/\n .exclusive-gallery-section {\n --color-01: #f3d8d1;\n --color-02: #e8afa7;\n --color-03: #002842;\n --color-04: #d2a750;\n --color-05: #b37e34;\n --color-06: #245080;\n }\n\n \/* ========================================\n DIVISORES DE FORMA (OLAS ASOCIADAS)\n ======================================== *\/\n .custom-shape-divider-top-1782867776 {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n overflow: hidden;\n line-height: 0;\n z-index: 2;\n }\n\n .custom-shape-divider-top-1782867776 svg {\n position: relative;\n display: block;\n width: calc(100% + 1.3px);\n height: 120px;\n }\n\n .custom-shape-divider-top-1782867776 .shape-fill {\n fill: #FFFFFF;\n }\n\n .custom-shape-divider-bottom-1782867776 {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n overflow: hidden;\n line-height: 0;\n z-index: 2;\n transform: rotate(180deg);\n }\n\n .custom-shape-divider-bottom-1782867776 svg {\n position: relative;\n display: block;\n width: calc(100% + 1.3px);\n height: 120px;\n }\n\n .custom-shape-divider-bottom-1782867776 .shape-fill {\n fill: #FFFFFF;\n }\n\n \/* ===== SECCI\u00d3N GENERAL ===== *\/\n .exclusive-gallery-section {\n width: 100% !important;\n padding: 180px 24px !important;\n position: relative !important;\n background: #FDFCFB !important; \n display: flex !important;\n flex-direction: column !important;\n align-items: center !important;\n overflow: hidden !important;\n font-family: 'Lexend', sans-serif !important;\n }\n\n \/* CAPA: ICONOS ANIMADOS DE FONDO *\/\n .bg-gallery-icons {\n position: absolute !important;\n top: 0 !important;\n left: 0 !important;\n width: 100% !important;\n height: 100% !important;\n z-index: 1 !important;\n pointer-events: none !important;\n }\n\n .gall-pattern-icon {\n position: absolute !important;\n color: var(--color-02) !important;\n opacity: 0.15; \n will-change: transform !important;\n }\n\n \/* Posicionamiento y tiempos de animaci\u00f3n optimizados *\/\n .icon-g1 { font-size: 3rem; top: 15%; left: 8%; animation: galleryFloat 8s ease-in-out infinite; }\n .icon-g2 { font-size: 3.5rem; top: 72%; left: 12%; animation: galleryFloat 11s ease-in-out infinite 1s; }\n .icon-g3 { font-size: 2.8rem; top: 25%; left: 45%; animation: galleryFloat 9s ease-in-out infinite 0.5s; }\n .icon-g4 { font-size: 3.2rem; top: 80%; left: 48%; animation: galleryFloat 10s ease-in-out infinite 1.5s; }\n .icon-g5 { font-size: 4.5rem; top: 12%; right: 10%; animation: galleryFloat 12s ease-in-out infinite; }\n\n @keyframes galleryFloat {\n 0%, 100% { transform: translateY(0) rotate(0deg); }\n 50% { transform: translateY(-15px) rotate(8deg); }\n }\n\n .gallery-container {\n width: 100% !important;\n max-width: 1100px !important;\n margin: 0 auto !important;\n position: relative !important;\n z-index: 4 !important;\n }\n\n \/* --- ENCABEZADO --- *\/\n .exclusive-gallery-section .header-inst {\n text-align: center !important;\n max-width: 900px !important;\n margin: 0 auto !important;\n }\n\n .exclusive-gallery-section .badge-inst {\n display: inline-flex !important;\n align-items: center !important;\n gap: 8px !important;\n padding: 6px 18px !important;\n background: var(--color-01) !important; \n color: var(--color-03) !important;\n border-radius: 30px !important;\n font-size: 0.75rem !important;\n font-weight: 600 !important;\n letter-spacing: 2px !important;\n margin-bottom: 24px !important;\n border: 1px solid var(--color-02) !important;\n }\n\n .exclusive-gallery-section .badge-inst i {\n color: var(--color-06) !important; \n font-size: 0.8rem !important;\n }\n\n .exclusive-gallery-section h2 {\n font-family: 'Literata', serif !important;\n font-size: clamp(1.85rem, 3.8vw, 2.5rem) !important;\n font-weight: 600 !important;\n color: var(--color-03) !important;\n line-height: 1.35 !important;\n letter-spacing: -0.01em !important;\n margin: 0 !important;\n }\n\n .exclusive-gallery-section h2 .highlight-brand {\n color: var(--color-06) !important; \n font-weight: 600 !important;\n }\n\n .exclusive-gallery-section .divider-inst {\n width: 60px !important;\n height: 4px !important;\n background: var(--color-04) !important; \n border-radius: 3px !important;\n margin: 25px auto 0 !important;\n }\n\n \/* --- CARRUSEL MARQUEE --- *\/\n .exclusive-marquee-container {\n width: 100% !important;\n overflow: hidden !important;\n display: flex !important;\n position: relative !important;\n padding: 60px 0 !important;\n }\n\n \/* Difuminados laterales degradados *\/\n .exclusive-marquee-container::before,\n .exclusive-marquee-container::after {\n content: '' !important;\n position: absolute !important;\n top: 0 !important;\n width: 15% !important;\n height: 100% !important;\n z-index: 5 !important;\n pointer-events: none !important;\n }\n .exclusive-marquee-container::before {\n left: 0 !important;\n background: linear-gradient(to right, #FDFCFB, transparent) !important;\n }\n .exclusive-marquee-container::after {\n right: 0 !important;\n background: linear-gradient(to left, #FDFCFB, transparent) !important;\n }\n\n .exclusive-marquee-track {\n display: flex !important;\n gap: 35px !important;\n width: max-content !important;\n \/* Animaci\u00f3n ajustada para desplazarse suavemente un 50% exacto del total de la pista de 8 elementos *\/\n animation: exclusiveScroll 32s linear infinite !important;\n }\n\n .exclusive-marquee-container:hover .exclusive-marquee-track {\n animation-play-state: paused !important;\n }\n\n @keyframes exclusiveScroll {\n 0% { transform: translateX(0); }\n 100% { transform: translateX(calc(-50% - 17.5px)); } \/* 17.5px corresponde a la mitad del gap (35px) para un encaje perfecto *\/\n }\n\n \/* --- TARJETAS DE LA GALER\u00cdA --- *\/\n .exclusiv-angular-card {\n width: 360px !important;\n height: 260px !important;\n position: relative !important;\n background: transparent !important;\n flex-shrink: 0 !important;\n cursor: pointer !important;\n transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;\n }\n\n .exclusiv-angular-card::before {\n content: '' !important;\n position: absolute !important;\n top: 12px !important;\n left: 12px !important;\n right: -12px !important;\n bottom: -12px !important;\n background: transparent !important;\n border-right: 2px solid var(--color-01) !important;\n border-bottom: 2px solid var(--color-01) !important;\n border-radius: 8px !important;\n z-index: 1 !important;\n transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;\n }\n\n .exclusiv-angular-card:nth-child(2n+1)::before { border-color: var(--color-02) !important; }\n .exclusiv-angular-card:nth-child(2n+2)::before { border-color: var(--color-04) !important; }\n\n .exclusiv-angular-card:hover::before {\n transform: translate(6px, 6px) !important;\n border-color: var(--color-06) !important;\n }\n\n .exclusiv-image-frame {\n width: 100% !important;\n height: 100% !important;\n position: relative !important;\n z-index: 3 !important;\n overflow: hidden !important;\n border-radius: 12px !important;\n background: var(--color-01) !important;\n box-shadow: 0 12px 35px rgba(0, 40, 66, 0.05) !important;\n transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;\n border: 1px solid rgba(0, 40, 66, 0.08) !important;\n }\n\n .exclusiv-image-frame img {\n width: 100% !important;\n height: 100% !important;\n object-fit: cover !important;\n display: block !important;\n transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;\n }\n\n .exclusiv-angular-card:hover .exclusiv-image-frame {\n transform: translate(-4px, -4px) !important;\n box-shadow: 0 20px 45px rgba(0, 40, 66, 0.15) !important;\n border-color: rgba(36, 80, 128, 0.3) !important;\n }\n\n .exclusiv-angular-card:hover .exclusiv-image-frame img {\n transform: scale(1.05) !important;\n }\n\n \/* --- BLOQUE DE ACCI\u00d3N CTA INFERIOR --- *\/\n .exclusive-action-box {\n margin-top: 20px !important;\n padding: 0 20px !important;\n text-align: center !important;\n }\n\n .exclusive-action-box p {\n font-family: 'Lexend', sans-serif !important;\n font-size: 1.15rem !important;\n font-weight: 300 !important;\n color: var(--color-03) !important;\n max-width: 720px !important;\n margin: 0 auto 40px !important;\n line-height: 1.65 !important;\n }\n\n \/* ===== ESTILOS DEL BOT\u00d3N PREMIUM ===== *\/\n .qro-fac-cta-wrap {\n display: flex;\n justify-content: center;\n width: 100%;\n }\n\n .qro-fac-cta {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n padding: 18px 40px;\n background: linear-gradient(135deg, var(--color-03) 0%, var(--color-06) 100%);\n color: #ffffff !important;\n font-family: 'Lexend', sans-serif;\n font-size: 1.15rem;\n font-weight: 600;\n text-decoration: none !important;\n border-radius: 16px;\n letter-spacing: -0.01em;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n position: relative;\n z-index: 10;\n }\n\n .qro-fac-cta i {\n font-size: 1.25rem;\n transition: transform 0.3s ease;\n }\n\n \/* Animaci\u00f3n de Anillo de Pulso Dorado *\/\n .qro-fac-cta::after {\n content: '';\n position: absolute;\n inset: -2px;\n border-radius: 18px;\n border: 2px solid var(--color-04);\n opacity: 0;\n animation: qroFacPulseRing 2.5s cubic-bezier(0.25, 0, 0, 1) infinite;\n }\n\n @keyframes qroFacPulseRing {\n 0% { transform: scale(0.98); opacity: 0.8; }\n 60%, 100% { transform: scale(1.08); opacity: 0; }\n }\n\n \/* Efectos Hover del Bot\u00f3n (Cambio a Dorado) *\/\n .qro-fac-cta:hover {\n background: linear-gradient(135deg, var(--color-05) 0%, var(--color-04) 100%);\n transform: translateY(-4px);\n box-shadow: 0 20px 25px -5px rgba(179, 126, 52, 0.25), 0 10px 10px -5px rgba(179, 126, 52, 0.15);\n }\n\n .qro-fac-cta:hover i {\n transform: scale(1.1);\n }\n\n .qro-fac-cta:active {\n transform: translateY(-1px);\n }\n\n \/* --- RESPONSIVE ADAPTATIVO --- *\/\n @media (max-width: 991px) {\n .exclusive-gallery-section {\n padding: 130px 24px !important;\n }\n \n .custom-shape-divider-top-1782867776 svg,\n .custom-shape-divider-bottom-1782867776 svg {\n height: 70px;\n }\n }\n\n @media (max-width: 768px) {\n .exclusive-gallery-section {\n padding: 100px 16px !important;\n }\n\n .gall-pattern-icon { \n opacity: 0.08; \n }\n\n .exclusiv-angular-card {\n width: 290px !important;\n height: 210px !important;\n }\n\n .exclusive-marquee-track {\n gap: 24px !important;\n }\n\n .exclusive-action-box p {\n font-size: 1rem !important;\n margin-bottom: 30px !important;\n }\n\n \/* Ajuste del bot\u00f3n en m\u00f3vil *\/\n .qro-fac-cta {\n width: 100%;\n max-width: 360px;\n padding: 16px 20px;\n font-size: 1.1rem;\n }\n }\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-26cc536 e-con-full e-flex e-con e-parent\" data-id=\"26cc536\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e46088a elementor-widget elementor-widget-html\" data-id=\"e46088a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Literata:ital,opsz,wght@0,7..72,400;0,7..72,600;1,7..72,400&family=Lexend:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\">\n\n<section class=\"dent-faq-section\" id=\"faq\">\n <div class=\"dent-faq-parallax-overlay\"><\/div>\n\n <div class=\"dent-faq-container\">\n\n <header class=\"dent-faq-header\">\n <h2><span class=\"dent-faq-highlight\">Preguntas frecuentes<\/span><\/h2>\n <div class=\"dent-faq-line\"><\/div>\n <\/header>\n\n <div class=\"dent-faq-card-wrapper\">\n\n \n <div class=\"dent-faq-image-side\">\n <div class=\"dent-faq-image-wrapper\">\n <img decoding=\"async\" class=\"animated-stomach\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/2148262173.webp\" alt=\"Preguntas Frecuentes - Cirug\u00eda Bari\u00e1trica\">\n <\/div>\n <\/div>\n\n \n <div class=\"dent-faq-accordion-side\">\n\n <div class=\"dent-faq-item\">\n <div class=\"dent-faq-question\">\n <h3>\u00bfC\u00f3mo s\u00e9 si soy candidato para una manga g\u00e1strica o un bypass g\u00e1strico?<\/h3>\n <span class=\"dent-faq-icon\"><i class=\"fas fa-chevron-down\"><\/i><\/span>\n <\/div>\n <div class=\"dent-faq-answer\">\n <p>La indicaci\u00f3n de un procedimiento bari\u00e1trico depende de una valoraci\u00f3n m\u00e9dica. Durante la consulta se evaluar\u00e1 tu estado de salud, \u00edndice de masa corporal, antecedentes y otros factores para determinar si alguna de estas opciones es adecuada para ti.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"dent-faq-item\">\n <div class=\"dent-faq-question\">\n <h3>\u00bfNecesito llevar estudios m\u00e9dicos a mi consulta?<\/h3>\n <span class=\"dent-faq-icon\"><i class=\"fas fa-chevron-down\"><\/i><\/span>\n <\/div>\n <div class=\"dent-faq-answer\">\n <p>Si cuentas con estudios recientes, como an\u00e1lisis de laboratorio, ultrasonidos o valoraciones previas, es recomendable llevarlos. Si es necesario realizar estudios adicionales, se te indicar\u00e1n durante la consulta<\/p>\n <\/div>\n <\/div>\n\n <div class=\"dent-faq-item\">\n <div class=\"dent-faq-question\">\n <h3>\u00bfQu\u00e9 m\u00e9todos de pago aceptan?<\/h3>\n <span class=\"dent-faq-icon\"><i class=\"fas fa-chevron-down\"><\/i><\/span>\n <\/div>\n <div class=\"dent-faq-answer\">\n <p>Aceptamos diferentes m\u00e9todos de pago para tu comodidad, incluyendo efectivo, transferencia bancaria y tarjetas de d\u00e9bito y cr\u00e9dito. Si tienes alguna duda sobre las formas de pago, nuestro equipo con gusto te orientar\u00e1<\/p>\n <\/div>\n <\/div>\n\n <div class=\"dent-faq-item\">\n <div class=\"dent-faq-question\">\n <h3>\u00bfLos planes de nutrici\u00f3n son personalizados?<\/h3>\n <span class=\"dent-faq-icon\"><i class=\"fas fa-chevron-down\"><\/i><\/span>\n <\/div>\n <div class=\"dent-faq-answer\">\n <p>S\u00ed. Cada plan de alimentaci\u00f3n se dise\u00f1a de acuerdo con tu estado de salud, objetivos, h\u00e1bitos y estilo de vida. El prop\u00f3sito es ofrecer una estrategia que puedas mantener a largo plazo y que forme parte de un tratamiento integral<\/p>\n <\/div>\n <\/div>\n\n <\/div>\n\n <\/div>\n\n \n <div class=\"dent-faq-footer\">\n <div class=\"qro-fac-cta-wrap\">\n <a href=\"https:\/\/wa.link\/zvs595\" target=\"_blank\" class=\"qro-fac-cta\">\n <i class=\"fa-regular fa-calendar-check\"><\/i>\n Quiero agendar\n <\/a>\n <\/div>\n <\/div>\n\n <\/div>\n<\/section>\n\n<style>\n \/* ===== PALETA DE COLORES SOLICITADA ===== *\/\n .dent-faq-section {\n --color-01: #f3d8d1;\n --color-02: #e8afa7;\n --color-03: #002842;\n --color-04: #d2a750;\n --color-05: #b37e34;\n --color-06: #245080;\n }\n\n \/* ===== ESTILOS GENERALES Y SECCI\u00d3N ===== *\/\n .dent-faq-section {\n padding: 80px 24px;\n font-family: 'Lexend', sans-serif;\n position: relative;\n overflow: hidden;\n background-image: url('https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/2148302152.jpg');\n background-attachment: fixed;\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n }\n\n .dent-faq-parallax-overlay {\n position: absolute;\n inset: 0;\n background: rgba(255, 255, 255, 0.75);\n z-index: 0;\n }\n\n .dent-faq-container {\n max-width: 1050px;\n margin: 0 auto;\n position: relative;\n z-index: 1;\n }\n\n \/* ENCABEZADO CON TITULO ELEGANTE *\/\n .dent-faq-header {\n text-align: center;\n margin-bottom: 40px;\n }\n\n .dent-faq-header h2 {\n font-family: 'Literata', serif;\n font-size: 2.4rem; \n font-weight: 600; \n margin: 0;\n line-height: 1.3;\n color: var(--color-03); \n display: inline-block;\n max-width: 850px;\n padding: 20px 40px;\n background: rgba(255, 255, 255, 0.9); \n backdrop-filter: blur(12px); \n -webkit-backdrop-filter: blur(12px); \n border-radius: 16px;\n border: 1px solid var(--color-01); \n box-shadow: 0 10px 30px rgba(0, 40, 66, 0.05);\n }\n\n .dent-faq-line {\n width: 70px;\n height: 4px;\n background: var(--color-04); \n margin: 20px auto 0;\n border-radius: 3px;\n }\n\n \/* CONTENEDOR PRINCIPAL TIPO TARJETA GRID *\/\n .dent-faq-card-wrapper {\n display: grid;\n grid-template-columns: 1fr 1.2fr;\n background: #ffffff;\n border-radius: 24px;\n overflow: hidden;\n box-shadow: 0 20px 40px rgba(0, 40, 66, 0.06);\n border: 1px solid rgba(0, 40, 66, 0.1); \n }\n\n \/* LADO IZQUIERDO: CONTENEDOR DE IMAGEN AJUSTADA AL 100% *\/\n .dent-faq-image-side {\n position: relative;\n background-color: var(--color-01); \n display: flex;\n align-items: stretch; \/* Estira el contenedor para igualar al acorde\u00f3n *\/\n justify-content: center;\n }\n\n .dent-faq-image-wrapper {\n position: relative;\n width: 100%;\n height: 100%;\n min-height: 400px;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n }\n\n \/* Imagen fija reajustada para cubrir todo el lateral *\/\n .dent-faq-image-wrapper img.animated-stomach {\n width: 100%;\n height: 100%;\n object-fit: cover; \/* Hace que la imagen llene el contenedor sin deformarse *\/\n display: block;\n animation: floatStomach 8s ease-in-out infinite;\n }\n\n \/* ANIMACI\u00d3N DE PULSACI\u00d3N SUAVE PARA LA IMAGEN DE FONDO *\/\n @keyframes floatStomach {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.03); }\n 100% { transform: scale(1); }\n }\n\n \/* LADO DERECHO: ACORDE\u00d3N DE PREGUNTAS *\/\n .dent-faq-accordion-side {\n padding: 3rem 2.5rem;\n display: flex;\n flex-direction: column;\n justify-content: center;\n background: #ffffff;\n }\n\n .dent-faq-item {\n border-bottom: 1px solid rgba(0, 40, 66, 0.1); \n padding: 4px 0;\n }\n\n .dent-faq-item:last-child {\n border-bottom: none;\n }\n\n .dent-faq-question {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 18px 0;\n cursor: pointer;\n gap: 16px;\n }\n\n .dent-faq-question h3 {\n font-family: 'Lexend', sans-serif;\n font-size: 1.05rem; \n font-weight: 500; \n color: var(--color-03); \n margin: 0;\n line-height: 1.45;\n transition: color 0.25s ease;\n flex: 1;\n }\n\n .dent-faq-question:hover h3 {\n color: var(--color-06); \n }\n\n .dent-faq-icon {\n flex-shrink: 0;\n width: 34px;\n height: 34px;\n border-radius: 50%;\n background: var(--color-01); \n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--color-03); \n font-size: 0.8rem;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n \/* Estados Activos del Acorde\u00f3n *\/\n .dent-faq-item.active .dent-faq-icon {\n background: var(--color-06); \n color: #ffffff;\n transform: rotate(180deg);\n }\n\n .dent-faq-item.active .dent-faq-question h3 {\n color: var(--color-06);\n font-weight: 600;\n }\n\n .dent-faq-answer {\n max-height: 0;\n overflow: hidden;\n transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .dent-faq-item.active .dent-faq-answer {\n max-height: 400px;\n padding-bottom: 20px;\n }\n\n .dent-faq-answer p {\n font-family: 'Lexend', sans-serif;\n font-size: 0.95rem;\n color: var(--color-03); \n opacity: 0.85;\n line-height: 1.6;\n margin: 0;\n }\n\n \/* ===== ESTILOS DEL BOT\u00d3N PREMIUM ===== *\/\n .dent-faq-footer {\n margin-top: 45px;\n }\n\n .qro-fac-cta-wrap {\n display: flex;\n justify-content: center;\n width: 100%;\n }\n\n .qro-fac-cta {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n padding: 18px 40px;\n background: linear-gradient(135deg, var(--color-03) 0%, var(--color-06) 100%);\n color: #ffffff !important;\n font-family: 'Lexend', sans-serif;\n font-size: 1.15rem;\n font-weight: 600;\n text-decoration: none !important;\n border-radius: 16px;\n letter-spacing: -0.01em;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n position: relative;\n }\n\n .qro-fac-cta i {\n font-size: 1.25rem;\n transition: transform 0.3s ease;\n }\n\n \/* Animaci\u00f3n de Anillo de Pulso *\/\n .qro-fac-cta::after {\n content: '';\n position: absolute;\n inset: -2px;\n border-radius: 18px;\n border: 2px solid var(--color-04);\n opacity: 0;\n animation: qroFacPulseRing 2.5s cubic-bezier(0.25, 0, 0, 1) infinite;\n }\n\n @keyframes qroFacPulseRing {\n 0% { transform: scale(0.98); opacity: 0.8; }\n 60%, 100% { transform: scale(1.08); opacity: 0; }\n }\n\n \/* Efectos Hover del Bot\u00f3n *\/\n .qro-fac-cta:hover {\n background: linear-gradient(135deg, var(--color-05) 0%, var(--color-04) 100%);\n transform: translateY(-4px);\n box-shadow: 0 20px 25px -5px rgba(179, 126, 52, 0.25), 0 10px 10px -5px rgba(179, 126, 52, 0.15);\n }\n\n .qro-fac-cta:hover i {\n transform: scale(1.1);\n }\n\n .qro-fac-cta:active {\n transform: translateY(-1px);\n }\n\n \/* RESPONSIVIDAD *\/\n @media (max-width: 991px) {\n .dent-faq-card-wrapper { grid-template-columns: 1fr 1.1fr; }\n .dent-faq-image-wrapper { min-height: 360px; }\n }\n\n @media (max-width: 868px) {\n .dent-faq-card-wrapper { \n display: flex;\n flex-direction: column;\n }\n .dent-faq-accordion-side { \n order: 1; \n padding: 2.5rem 1.5rem;\n }\n .dent-faq-image-side { \n order: 2;\n border-top: 1px solid rgba(0, 40, 66, 0.1);\n }\n .dent-faq-image-wrapper { min-height: 280px; max-height: 320px; }\n .dent-faq-header h2 { font-size: 1.8rem; padding: 16px 20px; }\n .dent-faq-section { background-attachment: scroll; } \n }\n\n @media (max-width: 768px) {\n .dent-faq-section { padding: 50px 16px; }\n .dent-faq-header h2 { font-size: 1.5rem; padding: 14px 16px; }\n .dent-faq-question h3 { font-size: 0.98rem; }\n .qro-fac-cta { width: 100%; max-width: 360px; box-sizing: border-box; }\n }\n<\/style>\n\n<script>\n document.addEventListener('DOMContentLoaded', function() {\n var faqItems = document.querySelectorAll('.dent-faq-item');\n\n faqItems.forEach(function(item) {\n var question = item.querySelector('.dent-faq-question');\n\n question.addEventListener('click', function() {\n var isActive = item.classList.contains('active');\n faqItems.forEach(function(otherItem) {\n otherItem.classList.remove('active');\n });\n if (!isActive) {\n item.classList.add('active');\n }\n });\n });\n\n if (faqItems.length > 0) {\n faqItems[0].classList.add('active');\n }\n });\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6520427 e-con-full e-flex e-con e-parent\" data-id=\"6520427\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b0e09b9 elementor-widget elementor-widget-html\" data-id=\"b0e09b9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Lexend:wght@300;400;500;600;700&family=Literata:ital,wght@0,400;0,600;1,400&display=swap\" rel=\"stylesheet\">\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\">\n\n\n<section class=\"wen-contacto-section\" id=\"contacto\">\n \n <div class=\"wen-bg-rain-container\">\n <i class=\"fas fa-apple-alt wen-icon-rain r-1\"><\/i>\n <i class=\"fas fa-dumbbell wen-icon-rain r-2\"><\/i>\n <i class=\"fas fa-leaf wen-icon-rain r-3\"><\/i>\n <i class=\"fas fa-carrot wen-icon-rain r-4\"><\/i>\n <i class=\"fas fa-dumbbell wen-icon-rain r-5\"><\/i>\n <i class=\"fas fa-apple-alt wen-icon-rain r-6\"><\/i>\n <i class=\"fas fa-leaf wen-icon-rain r-7\"><\/i>\n <i class=\"fas fa-carrot wen-icon-rain r-8\"><\/i>\n <\/div>\n\n <div class=\"wen-contacto-container\">\n \n <header class=\"wen-contacto-header\">\n <span class=\"wen-contacto-subtitle\">Contacto<\/span>\n <h2 class=\"wen-copy-principal\">\n Hoy puede ser un buen momento para comenzar\n <\/h2>\n <p class=\"wen-copy-desc\">\n No importa en qu\u00e9 etapa te encuentres. Si deseas mejorar tu salud y conocer las alternativas disponibles, estaremos listos para acompa\u00f1arte\n <\/p>\n <div class=\"wen-decorador-linea\"><\/div>\n <\/header>\n\n <div class=\"wen-contacto-wrapper\">\n \n \n <div class=\"wen-columna-info\">\n \n \n <div class=\"wen-info-bloque card-main-click\" onclick=\"window.open('https:\/\/maps.app.goo.gl\/izy33GLexA6sVkXr5', '_blank')\">\n <div class=\"wen-icon-wrapper\">\n <i class=\"fas fa-map-marker-alt\"><\/i>\n <\/div>\n <div class=\"wen-bloque-textos\">\n <div class=\"wen-header-click-title\">\n <h3>Se les acab\u00f3 su gordito<\/h3>\n <span class=\"wen-click-hint\">Ver mapa <i class=\"fas fa-external-link-alt\"><\/i><\/span>\n <\/div>\n <p class=\"wen-direccion-detallada\">\n Centro Comercial Punto MAQ: Av. Miguel \u00c1ngel de Quevedo 1144, Nivel 3, Local 103, Parque San Andr\u00e9s, Coyoac\u00e1n, 04040 Ciudad de M\u00e9xico, CDMX\n <\/p>\n \n <\/div>\n <\/div>\n\n <div class=\"wen-separador-bloques\"><\/div>\n\n \n <div class=\"wen-info-bloque\">\n <div class=\"wen-icon-wrapper\">\n <i class=\"far fa-clock\"><\/i>\n <\/div>\n <div class=\"wen-bloque-textos\">\n <h3>Horarios de atenci\u00f3n<\/h3>\n <div class=\"wen-horarios-list\">\n <p><strong>Lunes a viernes:<\/strong><\/p>\n <p class=\"wen-text-destacado\">9:00 am a 9:00 pm<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n\n \n <div class=\"wen-columna-acciones\">\n \n \n <a href=\"https:\/\/wa.link\/zvs595\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"wen-accion-card card-wa\">\n <div class=\"wen-accion-icon\"><i class=\"fab fa-whatsapp\"><\/i><\/div>\n <div class=\"wen-accion-info\">\n <span class=\"wen-accion-tag\">WhatsApp<\/span>\n <p class=\"wen-accion-numero\">720 925 8687<\/p>\n <\/div>\n <div class=\"wen-accion-arrow\"><i class=\"fas fa-chevron-right\"><\/i><\/div>\n <\/a>\n\n \n <a href=\"tel:5522897556\" class=\"wen-accion-card card-tel\">\n <div class=\"wen-accion-icon\"><i class=\"fas fa-phone-alt\"><\/i><\/div>\n <div class=\"wen-accion-info\">\n <span class=\"wen-accion-tag\">Tel\u00e9fono<\/span>\n <p class=\"wen-accion-numero\">55 2289 7556<\/p>\n <span class=\"wen-accion-ext\">Ext. 4001 y 4002<\/span>\n <\/div>\n <div class=\"wen-accion-arrow\"><i class=\"fas fa-chevron-right\"><\/i><\/div>\n <\/a>\n\n <\/div>\n\n <\/div>\n\n <\/div>\n<\/section>\n\n<style>\n \/* ===== CONFIGURACI\u00d3N BASE Y COLORES ESTABLECIDOS ===== *\/\n .wen-contacto-section {\n padding: 80px 24px;\n background-color: #f3d8d1; \/* Color 01 *\/\n font-family: 'Lexend', sans-serif;\n position: relative;\n overflow: hidden;\n width: 100%;\n }\n\n .wen-contacto-section *, .wen-contacto-section *::before, .wen-contacto-section *::after {\n box-sizing: border-box;\n }\n\n \/* ===== SISTEMA DE LLUVIA ANIMADA EN CA\u00cdDA ===== *\/\n .wen-bg-rain-container {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 1;\n }\n\n .wen-icon-rain {\n position: absolute;\n top: -10%;\n color: #e8afa7; \/* Color 02 - Sutil para el fondo animado *\/\n font-size: 1.8rem;\n user-select: none;\n animation: wenRain linear infinite;\n }\n\n .wen-icon-rain.r-1 { left: 7%; font-size: 2.2rem; animation-duration: 13s; animation-delay: 0s; }\n .wen-icon-rain.r-2 { left: 23%; font-size: 1.5rem; animation-duration: 10s; animation-delay: 2s; }\n .wen-icon-rain.r-3 { left: 40%; font-size: 1.8rem; animation-duration: 15s; animation-delay: 1s; }\n .wen-icon-rain.r-4 { left: 55%; font-size: 2rem; animation-duration: 12s; animation-delay: 3.5s; }\n .wen-icon-rain.r-5 { left: 70%; font-size: 1.4rem; animation-duration: 11s; animation-delay: 0.5s; }\n .wen-icon-rain.r-6 { left: 86%; font-size: 2.4rem; animation-duration: 16s; animation-delay: 4s; }\n .wen-icon-rain.r-7 { left: 94%; font-size: 1.3rem; animation-duration: 9s; animation-delay: 1.8s; }\n .wen-icon-rain.r-8 { left: 48%; font-size: 1.6rem; animation-duration: 14s; animation-delay: 5s; }\n\n @keyframes wenRain {\n 0% { top: -10%; transform: translateX(0) rotate(0deg); opacity: 0; }\n 10% { opacity: 0.7; }\n 90% { opacity: 0.7; }\n 100% { top: 110%; transform: translateX(25px) rotate(360deg); opacity: 0; }\n }\n\n .wen-contacto-container {\n max-width: 1100px;\n margin: 0 auto;\n position: relative;\n z-index: 2;\n }\n\n \/* ENCABEZADO *\/\n .wen-contacto-header {\n text-align: center;\n max-width: 750px;\n margin: 0 auto 55px;\n }\n\n .wen-contacto-subtitle {\n display: block;\n color: #b37e34; \/* Color 05 *\/\n font-weight: 600;\n font-size: 0.9rem;\n letter-spacing: 2px;\n \n margin-bottom: 12px;\n }\n\n .wen-copy-principal {\n font-family: 'Lexend', sans-serif;\n font-size: 2.2rem;\n font-weight: 700;\n line-height: 1.3;\n color: #002842; \/* Color 03 *\/\n margin: 0 0 16px 0;\n }\n\n .wen-copy-desc {\n font-family: 'Literata', serif;\n font-size: 1.15rem;\n color: #245080; \/* Color 06 *\/\n line-height: 1.6;\n margin: 0;\n }\n\n .wen-decorador-linea {\n width: 70px;\n height: 4px;\n background-color: #d2a750; \/* Color 04 *\/\n margin: 24px auto 0;\n border-radius: 4px;\n }\n\n \/* MAQUETACI\u00d3N EN GRID *\/\n .wen-contacto-wrapper {\n display: grid;\n grid-template-columns: 1.25fr 1fr;\n gap: 35px;\n align-items: start;\n }\n\n .wen-columna-info {\n background: #ffffff;\n border-radius: 24px;\n padding: 45px;\n box-shadow: 0 15px 35px rgba(0, 40, 66, 0.05);\n border: 1px solid #e8afa7; \/* Color 02 *\/\n }\n\n .wen-info-bloque {\n display: flex;\n gap: 24px;\n }\n\n .card-main-click {\n cursor: pointer;\n transition: background 0.25s ease;\n padding: 16px;\n margin: -16px;\n border-radius: 20px;\n }\n\n .card-main-click:hover {\n background: #f3d8d1; \/* Color 01 suavecito al pasar el mouse *\/\n }\n\n .wen-header-click-title {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n }\n\n .wen-click-hint {\n font-size: 0.8rem;\n font-weight: 500;\n color: #b37e34; \/* Color 05 *\/\n opacity: 0;\n transform: translateX(-5px);\n transition: all 0.3s ease;\n }\n\n .card-main-click:hover .wen-click-hint {\n opacity: 1;\n transform: translateX(0);\n }\n\n .wen-icon-wrapper {\n width: 52px;\n height: 52px;\n border-radius: 14px;\n background: #002842; \/* Color 03 *\/\n color: #d2a750; \/* Color 04 *\/\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.3rem;\n flex-shrink: 0;\n }\n\n .wen-bloque-textos {\n flex: 1;\n }\n\n .wen-bloque-textos h3 {\n font-size: 1.2rem; \n font-weight: 600;\n color: #002842; \/* Color 03 *\/\n margin: 0 0 8px 0;\n }\n\n .wen-direccion-detallada {\n font-family: 'Literata', serif;\n font-size: 1rem;\n color: #245080; \/* Color 06 *\/\n line-height: 1.6;\n margin: 0 0 16px 0;\n }\n\n .wen-badge-consultorio {\n display: inline-block;\n background: #002842; \/* Color 03 *\/\n color: #d2a750; \/* Color 04 *\/\n font-weight: 600;\n font-size: 0.8rem;\n padding: 6px 14px;\n border-radius: 8px;\n letter-spacing: 0.5px;\n }\n\n .wen-separador-bloques {\n height: 1px;\n background: #e8afa7; \/* Color 02 *\/\n margin: 35px 0;\n }\n\n .wen-horarios-list p {\n font-family: 'Literata', serif;\n font-size: 1.05rem;\n color: #245080; \/* Color 06 *\/\n margin: 0 0 6px 0;\n }\n \n .wen-horarios-list p strong {\n font-family: 'Lexend', sans-serif;\n color: #002842; \/* Color 03 *\/\n font-weight: 500;\n }\n\n .wen-text-destacado {\n font-family: 'Lexend', sans-serif !important;\n font-size: 1.3rem !important;\n font-weight: 700;\n color: #b37e34 !important; \/* Color 05 *\/\n margin-top: 4px;\n }\n\n \/* COLUMNA DE BOTONES DE ACCI\u00d3N *\/\n .wen-columna-acciones {\n display: flex;\n flex-direction: column;\n gap: 20px;\n }\n\n .wen-accion-card {\n background: #002842; \/* Color 03 de fondo *\/\n border-radius: 20px;\n padding: 26px;\n display: flex;\n align-items: center;\n gap: 20px;\n text-decoration: none !important;\n border: 1px solid transparent;\n transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n }\n\n .wen-accion-card:hover {\n transform: translateY(-4px);\n background: #245080; \/* Cambia a Color 06 al pasar mouse *\/\n box-shadow: 0 12px 25px rgba(0, 40, 66, 0.15);\n }\n\n .wen-accion-icon {\n width: 48px;\n height: 48px;\n border-radius: 12px;\n background: rgba(210, 167, 80, 0.1); \n color: #d2a750; \/* Color 04 *\/\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.4rem;\n flex-shrink: 0;\n transition: background 0.3s;\n }\n\n .wen-accion-card:hover .wen-accion-icon {\n background: #002842; \/* Invierte fondo interno *\/\n }\n\n .wen-accion-info { \n flex: 1; \n }\n\n .wen-accion-tag {\n font-size: 0.85rem;\n font-weight: 500;\n color: #e8afa7; \/* Color 02 *\/\n display: block;\n margin-bottom: 4px;\n letter-spacing: 1px;\n \n }\n\n .wen-accion-numero {\n font-size: 1.4rem;\n font-weight: 700;\n margin: 0;\n color: #d2a750; \/* Color 04 *\/\n }\n\n .wen-accion-ext {\n display: block;\n font-family: 'Literata', serif;\n font-size: 0.95rem;\n color: #f3d8d1; \/* Color 01 *\/\n margin-top: 2px;\n }\n \n .wen-accion-arrow { \n color: #e8afa7; \/* Color 02 *\/\n font-size: 1rem; \n transition: transform 0.25s ease, color 0.25s; \n }\n \n .wen-accion-card:hover .wen-accion-arrow { \n transform: translateX(5px); \n color: #d2a750; \/* Color 04 *\/\n }\n\n \/* RESPONSIVE DESIGN *\/\n @media (max-width: 992px) {\n .wen-contacto-wrapper { grid-template-columns: 1fr; gap: 28px; }\n }\n\n @media (max-width: 768px) {\n .wen-contacto-section { padding: 50px 16px; }\n .wen-contacto-header { margin-bottom: 40px; }\n .wen-copy-principal { font-size: 1.75rem; }\n .wen-copy-desc { font-size: 1.05rem; }\n .wen-columna-info { padding: 28px; }\n .wen-info-bloque { gap: 16px; }\n .wen-icon-wrapper { width: 46px; height: 46px; font-size: 1.15rem; }\n .wen-click-hint { display: none; }\n .wen-icon-rain { opacity: 0.4; }\n .wen-accion-numero { font-size: 1.25rem; }\n }\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6f1390a e-con-full e-flex e-con e-parent\" data-id=\"6f1390a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6cf24c5 elementor-widget elementor-widget-html\" data-id=\"6cf24c5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"wen-mapa-seccion\">\n\n <div class=\"wen-map-wrapper\">\n <div class=\"wen-map-header\">\n <div class=\"wen-map-status\">\n <span class=\"wen-map-pulse-dot\"><\/span>\n <span class=\"wen-map-location-text\">Ubicaci\u00f3n de la consulta<\/span>\n <\/div>\n <div class=\"wen-map-brand-badge\">\n <i class=\"fa-solid fa-location-dot\"><\/i> Google Maps\n <\/div>\n <\/div>\n\n <div class=\"wen-map-iframe-container\">\n <iframe src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d4720.4602713842!2d-99.14658!3d19.34299!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x85d1fff1b7efa38f%3A0xf476d9b55a2f2cfd!2sCentro%20Comercial%20Punto%20MAQ!5e1!3m2!1ses-419!2smx!4v1784052763458!5m2!1ses-419!2smx\" width=\"600\" height=\"450\" style=\"border:0;\" allowfullscreen=\"\" loading=\"lazy\" referrerpolicy=\"strict-origin-when-cross-origin\"><\/iframe>\n <\/div>\n <\/div>\n\n <div class=\"wen-shape-divider-map wen-shape-bottom-map\">\n <svg data-name=\"Layer 1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 1200 120\" preserveAspectRatio=\"none\">\n <path d=\"M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z\" fill=\"#F4EFEA\"><\/path>\n <\/svg>\n <\/div>\n\n<\/section>\n\n<style>\n \/* ===== ENVOLTORIO GENERAL CON EL COLOR ACENTUADO ===== *\/\n .wen-mapa-seccion {\n position: relative;\n width: 100%;\n background-color: #F4EFEA; \/* Rosa sutil e intenso que hace juego con las formas *\/\n padding: 60px 0 110px 0; \/* Padding inferior extra para dar espacio a la onda *\/\n }\n\n \/* ===== ESTILO DE LA FORMA INFERIOR ===== *\/\n .wen-shape-divider-map {\n position: absolute;\n left: 0;\n width: 100%;\n overflow: hidden;\n line-height: 0;\n z-index: 3;\n }\n\n .wen-shape-divider-map svg {\n position: relative;\n display: block;\n width: calc(100% + 1.3px);\n height: 85px; \/* Altura ideal de la onda para que sea notoria *\/\n }\n\n .wen-shape-bottom-map {\n bottom: 0;\n transform: translateY(99%); \/* Se posiciona exactamente debajo de la secci\u00f3n *\/\n }\n\n \/* ===== DISE\u00d1O PREMIUM Y PERSONALIZADO DEL MAPA ===== *\/\n .wen-map-wrapper {\n max-width: 900px; \/* Ancho m\u00e1ximo ideal y equilibrado *\/\n margin: 0 auto;\n background: #ffffff;\n border-radius: 24px; \/* Bordes muy curvos y modernos *\/\n padding: 12px; \/* Espacio interior simulando un marco sofisticado *\/\n box-shadow: 0 20px 40px rgba(44, 53, 48, 0.06), \n 0 1px 3px rgba(44, 53, 48, 0.02); \/* Sombra ultra suave *\/\n border: 1px solid #EAE5E1; \/* L\u00ednea divisoria fina tono crema *\/\n font-family: 'Poppins', sans-serif;\n position: relative;\n z-index: 4; \/* Por encima del fondo *\/\n }\n\n \/* Cabecera superior del mapa *\/\n .wen-map-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 14px 16px;\n background: #FDFBF9; \/* Fondo crema muy suave tono branding *\/\n border-radius: 16px 16px 0 0;\n border-bottom: 1px solid #F4EFEA;\n margin-bottom: 12px;\n }\n\n .wen-map-status {\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n \/* Punto verde parpadeante interactivo *\/\n .wen-map-pulse-dot {\n width: 8px;\n height: 8px;\n background-color: #10B981; \/* Tu verde de acci\u00f3n *\/\n border-radius: 50%;\n position: relative;\n }\n\n .wen-map-pulse-dot::after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n background: #10B981;\n border-radius: 50%;\n animation: wenMapPulse 2s infinite ease-in-out;\n opacity: 0.6;\n }\n\n @keyframes wenMapPulse {\n 0% { transform: scale(1); opacity: 0.6; }\n 100% { transform: scale(3); opacity: 0; }\n }\n\n .wen-map-location-text {\n font-size: 0.9rem;\n font-weight: 500;\n color: #2C3530; \/* Tu verde oscuro insignia *\/\n letter-spacing: -0.1px;\n }\n\n \/* Badge o etiqueta derecha *\/\n .wen-map-brand-badge {\n font-size: 0.75rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n color: #B38E8A; \/* Rosa de acento *\/\n background: rgba(179, 142, 138, 0.08);\n padding: 6px 12px;\n border-radius: 30px;\n display: flex;\n align-items: center;\n gap: 6px;\n }\n\n \/* Contenedor estricto del Iframe *\/\n .wen-map-iframe-container {\n width: 100%;\n border-radius: 0 0 16px 16px; \/* Ajusta esquinas inferiores *\/\n overflow: hidden; \/* Obliga al mapa a heredar las curvas *\/\n position: relative;\n background: #F4EFEA;\n line-height: 0; \/* Evita espacios residuales debajo del iframe *\/\n }\n\n \/* Hacer el mapa completamente responsive *\/\n .wen-map-iframe-container iframe {\n display: block;\n width: 100% !important;\n height: 450px;\n filter: grayscale(10%) contrast(102%); \/* Suaviza los colores estridentes nativos de Google *\/\n transition: filter 0.3s ease;\n }\n\n \/* Cuando el usuario pasa el mouse, el mapa recupera su color vivo al 100% *\/\n .wen-map-iframe-container:hover iframe {\n filter: grayscale(0%) contrast(100%);\n }\n\n \/* RESPONSIVIDAD M\u00d3VIL *\/\n @media (max-width: 768px) {\n .wen-mapa-seccion {\n padding: 40px 0 70px 0;\n }\n .wen-shape-divider-map svg {\n height: 50px; \/* Escalado para m\u00f3viles *\/\n }\n .wen-map-wrapper {\n margin: 0 16px;\n padding: 8px;\n border-radius: 18px;\n }\n .wen-map-header {\n padding: 10px 12px;\n }\n .wen-map-location-text {\n font-size: 0.8rem;\n }\n .wen-map-brand-badge {\n font-size: 0.7rem;\n padding: 4px 10px;\n }\n .wen-map-iframe-container iframe {\n height: 350px; \/* Ajuste para scrolls t\u00e1ctiles *\/\n }\n }\n<\/style>\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>Se Les Acab\u00f3 Su Gordito \u00b7 Cl\u00ednica Bari\u00e1trica Se les acab\u00f3 su gordito Cl\u00ednica especialista en nutrici\u00f3n y bariatr\u00eda en […]<\/p>\n","protected":false},"author":1,"featured_media":1345,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-8","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\n<title>Cl\u00ednica de Obesidad en CDMX Coyoac\u00e1n | Especialistas en Control de Peso<\/title>\n<meta name=\"description\" content=\"Cl\u00ednica especializada en sobrepeso y obesidad. Valoraci\u00f3n m\u00e9dica, nutrici\u00f3n, tratamientos bari\u00e1tricos y acompa\u00f1amiento integral para mejorar tu salud\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/selesacabosugordito.com\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cl\u00ednica de Obesidad en CDMX Coyoac\u00e1n | Especialistas en Control de Peso\" \/>\n<meta property=\"og:description\" content=\"Cl\u00ednica especializada en sobrepeso y obesidad. Valoraci\u00f3n m\u00e9dica, nutrici\u00f3n, tratamientos bari\u00e1tricos y acompa\u00f1amiento integral para mejorar tu salud\" \/>\n<meta property=\"og:url\" content=\"https:\/\/selesacabosugordito.com\/\" \/>\n<meta property=\"og:site_name\" content=\"Se les acabo su gordito\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-14T23:37:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/LOGO-COLOR-1.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"464\" \/>\n\t<meta property=\"og:image:height\" content=\"356\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"11 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/selesacabosugordito.com\\\/\",\"url\":\"https:\\\/\\\/selesacabosugordito.com\\\/\",\"name\":\"Cl\u00ednica de Obesidad en CDMX Coyoac\u00e1n | Especialistas en Control de Peso\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/selesacabosugordito.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/selesacabosugordito.com\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/selesacabosugordito.com\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/selesacabosugordito.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/LOGO-COLOR-1.webp\",\"datePublished\":\"2025-12-03T17:02:09+00:00\",\"dateModified\":\"2026-07-14T23:37:53+00:00\",\"description\":\"Cl\u00ednica especializada en sobrepeso y obesidad. Valoraci\u00f3n m\u00e9dica, nutrici\u00f3n, tratamientos bari\u00e1tricos y acompa\u00f1amiento integral para mejorar tu salud\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/selesacabosugordito.com\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/selesacabosugordito.com\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/selesacabosugordito.com\\\/#primaryimage\",\"url\":\"https:\\\/\\\/selesacabosugordito.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/LOGO-COLOR-1.webp\",\"contentUrl\":\"https:\\\/\\\/selesacabosugordito.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/LOGO-COLOR-1.webp\",\"width\":464,\"height\":356},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/selesacabosugordito.com\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/selesacabosugordito.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Consulta\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/selesacabosugordito.com\\\/#website\",\"url\":\"https:\\\/\\\/selesacabosugordito.com\\\/\",\"name\":\"Se les acabo su gordito\",\"description\":\"Cl\u00ednica de Obesidad en CDMX Coyoac\u00e1n\",\"publisher\":{\"@id\":\"https:\\\/\\\/selesacabosugordito.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/selesacabosugordito.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/selesacabosugordito.com\\\/#organization\",\"name\":\"Se les acabo su gordito\",\"url\":\"https:\\\/\\\/selesacabosugordito.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/selesacabosugordito.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/selesacabosugordito.com\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/cropped-cropped-Logoselesacabosugordito.jpeg\",\"contentUrl\":\"https:\\\/\\\/selesacabosugordito.com\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/cropped-cropped-Logoselesacabosugordito.jpeg\",\"width\":512,\"height\":512,\"caption\":\"Se les acabo su gordito\"},\"image\":{\"@id\":\"https:\\\/\\\/selesacabosugordito.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n","yoast_head_json":{"title":"Cl\u00ednica de Obesidad en CDMX Coyoac\u00e1n | Especialistas en Control de Peso","description":"Cl\u00ednica especializada en sobrepeso y obesidad. Valoraci\u00f3n m\u00e9dica, nutrici\u00f3n, tratamientos bari\u00e1tricos y acompa\u00f1amiento integral para mejorar tu salud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/selesacabosugordito.com\/","og_locale":"es_ES","og_type":"article","og_title":"Cl\u00ednica de Obesidad en CDMX Coyoac\u00e1n | Especialistas en Control de Peso","og_description":"Cl\u00ednica especializada en sobrepeso y obesidad. Valoraci\u00f3n m\u00e9dica, nutrici\u00f3n, tratamientos bari\u00e1tricos y acompa\u00f1amiento integral para mejorar tu salud","og_url":"https:\/\/selesacabosugordito.com\/","og_site_name":"Se les acabo su gordito","article_modified_time":"2026-07-14T23:37:53+00:00","og_image":[{"width":464,"height":356,"url":"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/LOGO-COLOR-1.webp","type":"image\/webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Tiempo de lectura":"11 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/selesacabosugordito.com\/","url":"https:\/\/selesacabosugordito.com\/","name":"Cl\u00ednica de Obesidad en CDMX Coyoac\u00e1n | Especialistas en Control de Peso","isPartOf":{"@id":"https:\/\/selesacabosugordito.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/selesacabosugordito.com\/#primaryimage"},"image":{"@id":"https:\/\/selesacabosugordito.com\/#primaryimage"},"thumbnailUrl":"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/LOGO-COLOR-1.webp","datePublished":"2025-12-03T17:02:09+00:00","dateModified":"2026-07-14T23:37:53+00:00","description":"Cl\u00ednica especializada en sobrepeso y obesidad. Valoraci\u00f3n m\u00e9dica, nutrici\u00f3n, tratamientos bari\u00e1tricos y acompa\u00f1amiento integral para mejorar tu salud","breadcrumb":{"@id":"https:\/\/selesacabosugordito.com\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/selesacabosugordito.com\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/selesacabosugordito.com\/#primaryimage","url":"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/LOGO-COLOR-1.webp","contentUrl":"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/LOGO-COLOR-1.webp","width":464,"height":356},{"@type":"BreadcrumbList","@id":"https:\/\/selesacabosugordito.com\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/selesacabosugordito.com\/"},{"@type":"ListItem","position":2,"name":"Consulta"}]},{"@type":"WebSite","@id":"https:\/\/selesacabosugordito.com\/#website","url":"https:\/\/selesacabosugordito.com\/","name":"Se les acabo su gordito","description":"Cl\u00ednica de Obesidad en CDMX Coyoac\u00e1n","publisher":{"@id":"https:\/\/selesacabosugordito.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/selesacabosugordito.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/selesacabosugordito.com\/#organization","name":"Se les acabo su gordito","url":"https:\/\/selesacabosugordito.com\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/selesacabosugordito.com\/#\/schema\/logo\/image\/","url":"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2025\/12\/cropped-cropped-Logoselesacabosugordito.jpeg","contentUrl":"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2025\/12\/cropped-cropped-Logoselesacabosugordito.jpeg","width":512,"height":512,"caption":"Se les acabo su gordito"},"image":{"@id":"https:\/\/selesacabosugordito.com\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/selesacabosugordito.com\/index.php\/wp-json\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/selesacabosugordito.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/selesacabosugordito.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/selesacabosugordito.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/selesacabosugordito.com\/index.php\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":1003,"href":"https:\/\/selesacabosugordito.com\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":1423,"href":"https:\/\/selesacabosugordito.com\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions\/1423"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/selesacabosugordito.com\/index.php\/wp-json\/wp\/v2\/media\/1345"}],"wp:attachment":[{"href":"https:\/\/selesacabosugordito.com\/index.php\/wp-json\/wp\/v2\/media?parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n Se Les Acab\u00f3 Su Gordito \u00b7 Cl\u00ednica Bari\u00e1trica<\/title>\n\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Lexend:wght@300;400;500;600;700;800;900&family=Literata:ital,wght@0,400;0,600;0,700;1,400&display=swap\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\n\n <style>\n :root {\n --color-01: #f3d8d1;\n --color-02: #e8afa7;\n --color-03: #002842;\n --color-04: #d2a750;\n --color-05: #b37e34;\n --color-06: #245080;\n --font-heading: 'Lexend', sans-serif;\n --font-body: 'Literata', serif;\n --blanco: #ffffff;\n --negro: #000000;\n --mx: 50%;\n --my: 50%;\n }\n\n * { margin: 0; padding: 0; box-sizing: border-box; }\n body { font-family: var(--font-body); background: var(--color-01); overflow-x: hidden; }\n\n \/* ============================================\n HERO \u2014 VIDEO DE FONDO A PANTALLA COMPLETA\n ============================================ *\/\n .hero {\n position: relative;\n min-height: 100vh;\n width: 100%;\n display: flex;\n align-items: center;\n overflow: hidden;\n background: var(--color-03);\n }\n\n .hero-video-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: hidden; }\n .hero-video-bg video {\n position: absolute; top: 50%; left: 50%; width: 100%; height: 100%;\n object-fit: cover;\n transform: translate(-50%, -50%) scale(1.1);\n animation: kenBurns 24s ease-in-out infinite alternate;\n }\n @keyframes kenBurns {\n 0% { transform: translate(-50%, -50%) scale(1.1); }\n 100% { transform: translate(-52%, -48%) scale(1.22); }\n }\n\n .hero-scrim {\n position: absolute; inset: 0; z-index: 1;\n background:\n linear-gradient(100deg, rgba(0,40,66,0.94) 0%, rgba(0,40,66,0.78) 32%, rgba(0,40,66,0.42) 58%, rgba(0,40,66,0.12) 78%),\n linear-gradient(0deg, rgba(0,40,66,0.55) 0%, rgba(0,40,66,0) 30%);\n }\n\n .hero-curtain {\n position: absolute; inset: 0; z-index: 4;\n background: var(--color-03);\n animation: curtainOpen 1.3s cubic-bezier(0.65, 0, 0.35, 1) forwards 0.1s;\n pointer-events: none;\n }\n @keyframes curtainOpen { to { opacity: 0; visibility: hidden; } }\n\n .hero-mouse-glow {\n position: absolute; inset: 0; z-index: 2; pointer-events: none;\n background: radial-gradient(520px circle at var(--mx) var(--my), rgba(210, 167, 80, 0.22), transparent 70%);\n mix-blend-mode: screen;\n }\n\n .hero-light-sweep {\n position: absolute; inset: -20%; z-index: 2; pointer-events: none;\n background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.06) 48%, rgba(210, 167, 80, 0.1) 50%, transparent 58%);\n animation: sweep 9s ease-in-out infinite;\n }\n @keyframes sweep { 0%, 100% { transform: translateX(-15%); } 50% { transform: translateX(15%); } }\n\n .hero-fade-out {\n position: absolute; left: 0; right: 0; bottom: 0; height: 14%; z-index: 3;\n background: linear-gradient(180deg, transparent, var(--color-01));\n pointer-events: none;\n }\n\n .hero-container {\n position: relative; z-index: 5;\n max-width: 1300px; width: 100%;\n margin: 0 auto;\n padding: 2rem 6%;\n }\n\n \/* ============================================\n CONTENIDO\n ============================================ *\/\n .hero-content { display: flex; flex-direction: column; gap: 24px; max-width: 780px; }\n\n \/* --- T\u00edtulo vivo --- *\/\n .hero-title {\n font-family: var(--font-heading);\n font-size: clamp(2.8rem, 6vw, 4.6rem);\n font-weight: 900; line-height: 1.05; letter-spacing: -2px;\n color: var(--blanco);\n text-shadow: 0 4px 30px rgba(0,0,0,0.25);\n }\n .title-line { display: block; overflow: hidden; }\n .letter {\n display: inline-block; opacity: 0;\n transform: translateY(46px) rotateZ(6deg);\n animation: letterIn 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;\n will-change: transform, opacity;\n }\n @keyframes letterIn { to { opacity: 1; transform: translateY(0) rotateZ(0); } }\n\n .highlight-wrap { display: inline-block; }\n .highlight {\n position: relative; display: inline-block;\n background: linear-gradient(100deg, var(--color-05), var(--color-04) 35%, var(--color-02) 60%, var(--color-04) 85%);\n background-size: 220% auto;\n -webkit-background-clip: text; background-clip: text; color: transparent;\n cursor: default;\n animation:\n gordoJelly 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 1.55s both,\n simmerMove 5s linear infinite 2.45s,\n breathe 3.6s ease-in-out infinite 2.45s;\n }\n .highlight.jiggle { animation: gordoJelly 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both, shimmerMove 5s linear infinite, breathe 3.6s ease-in-out infinite; }\n .highlight::after {\n content: ''; position: absolute; left: 2%; bottom: 6px; width: 96%; height: 10px;\n background: rgba(210, 167, 80, 0.35); border-radius: 10px; z-index: -1;\n transform: skewX(-8deg) scaleX(0); transform-origin: left;\n animation: underlineGrow 0.6s ease forwards 2.1s;\n }\n @keyframes underlineGrow { to { transform: skewX(-8deg) scaleX(1); } }\n @keyframes gordoJelly {\n 0% { transform: scale(1.5, 0.6) rotate(-4deg); opacity: 0; }\n 45% { transform: scale(0.85, 1.18) rotate(3deg); opacity: 1; }\n 70% { transform: scale(1.08, 0.94) rotate(-2deg); }\n 85% { transform: scale(0.97, 1.03) rotate(1deg); }\n 100% { transform: scale(1) rotate(0); }\n }\n @keyframes shimmerMove { to { background-position: -220% center; } }\n @keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }\n\n \/* --- Especialidad --- *\/\n .hero-specialty {\n display: inline-flex; align-items: center; gap: 10px;\n font-family: var(--font-heading); font-weight: 700; font-size: clamp(0.95rem, 1.4vw, 1.15rem);\n letter-spacing: 0.5px;\n background: linear-gradient(100deg, var(--color-04) 0%, var(--color-02) 45%, var(--color-04) 100%);\n background-size: 220% auto;\n -webkit-background-clip: text; background-clip: text; color: transparent;\n position: relative; width: fit-content; padding-bottom: 8px;\n opacity: 0; transform: translateY(22px);\n animation: slideUp 0.8s ease 1.05s forwards, specialtyShimmer 4.5s linear infinite 2s;\n }\n .hero-specialty .dot {\n width: 7px; height: 7px; min-width: 7px; border-radius: 50%;\n background: var(--color-04);\n box-shadow: 0 0 10px 2px rgba(210, 167, 80, 0.6);\n animation: pulseDot 2s infinite 1.9s;\n }\n .hero-specialty::after {\n content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;\n background: linear-gradient(90deg, var(--color-04), var(--color-02), transparent);\n transform-origin: left; transform: scaleX(0);\n animation: underlineGrow2 0.9s cubic-bezier(0.65,0,0.35,1) forwards 1.6s;\n }\n @keyframes specialtyShimmer { to { background-position: -220% center; } }\n @keyframes underlineGrow2 { to { transform: scaleX(1); } }\n @keyframes pulseDot { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 1; transform: scale(1.9); } }\n\n .hero-sub {\n font-family: var(--font-heading);\n font-size: clamp(1rem, 1.15vw, 1.15rem);\n font-weight: 300; color: var(--color-01);\n line-height: 1.7; max-width: 580px;\n text-shadow: 0 2px 16px rgba(0,0,0,0.35);\n animation: slideUp 0.8s ease 1.75s forwards; opacity: 0; transform: translateY(24px);\n }\n\n \/* =======================================================\n NUEVAS CARACTER\u00cdSTICAS \u2014 TOTALMENTE EN L\u00cdNEA Y LIMPIO\n ======================================================= *\/\n .hero-features-inline {\n display: flex; \n align-items: center; \n flex-wrap: wrap; \n gap: 16px;\n width: 100%;\n padding: 0;\n background: none;\n backdrop-filter: none;\n -webkit-backdrop-filter: none;\n border: none;\n box-shadow: none;\n opacity: 0; transform: translateY(22px);\n animation: slideUp 0.8s ease 2.05s forwards;\n }\n .hero-features-inline .feat {\n font-family: var(--font-heading); \n font-weight: 500; \n font-size: clamp(0.9rem, 1.2vw, 1.05rem);\n color: var(--color-01);\n transition: color 0.3s ease;\n cursor: default;\n }\n .hero-features-inline .feat:hover { color: var(--blanco); }\n .hero-features-inline .feat-divider { \n width: 6px; \n height: 6px; \n border-radius: 50%;\n background: var(--color-04); \n flex: none; \n }\n\n .hero-actions {\n display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 12px;\n animation: slideUp 0.8s ease 2.4s forwards; opacity: 0; transform: translateY(24px);\n }\n\n \/* --- CTA de WhatsApp (Limpio, sin rayas, hover blanco) --- *\/\n .btn-primary {\n display: inline-flex; align-items: center; gap: 12px;\n font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem;\n letter-spacing: 0.5px;\n padding: 16px 38px;\n background: linear-gradient(135deg, var(--color-04), var(--color-05));\n color: var(--blanco); text-decoration: none !important;\n border: none; border-radius: 60px; cursor: pointer;\n transition: background 0.3s ease, color 0.3s ease, transform 0.15s ease-out;\n position: relative;\n }\n .btn-primary:hover { \n background: var(--blanco); \n color: var(--negro);\n }\n .btn-primary:focus-visible { outline: 3px solid var(--color-01); outline-offset: 4px; }\n .btn-primary .fa-whatsapp { font-size: 1.15rem; }\n .btn-primary .arrow { transition: transform 0.3s ease; }\n .btn-primary:hover .arrow { transform: translateX(6px); }\n\n \/* --- Cintas m\u00e9tricas flotantes --- *\/\n .tape-accent { position: absolute; z-index: 3; pointer-events: none; filter: drop-shadow(0 10px 24px rgba(0,0,0,0.3)); opacity: 0; transition: transform 0.3s ease-out; }\n .tape-accent.top { top: 6%; right: 7%; width: 130px; animation: fadeIn 1s ease forwards 2.6s, floatTapeV 5s ease-in-out infinite 3s; }\n .tape-accent.bottom { bottom: 16%; right: 15%; width: 150px; animation: fadeIn 1s ease forwards 2.8s, floatTapeH 4.5s ease-in-out infinite 3.2s; }\n @keyframes fadeIn { to { opacity: 0.9; } }\n @keyframes floatTapeV { 0%, 100% { transform: translateY(0) rotate(5deg); } 50% { transform: translateY(-14px) rotate(-4deg); } }\n @keyframes floatTapeH { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(3deg); } }\n .tape-accent img { width: 100%; height: auto; display: block; }\n\n @keyframes slideUp { to { opacity: 1; transform: translateY(0); } }\n\n .scroll-indicator {\n position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 5;\n display: flex; flex-direction: column; align-items: center; gap: 4px;\n color: rgba(255, 255, 255, 0.55);\n font-family: var(--font-heading); font-size: 0.45rem; letter-spacing: 3px; text-transform: uppercase;\n animation: fadeUp 1s ease 2.9s forwards, bounceDown 2.5s infinite 3.4s;\n opacity: 0;\n }\n .scroll-indicator .line { width: 1px; height: 30px; background: linear-gradient(180deg, rgba(255,255,255,0.5), transparent); position: relative; }\n .scroll-indicator .line::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--color-04); animation: scrollLine 2s infinite; opacity: 0.7; }\n @keyframes scrollLine { 0% { transform: translateY(0); opacity: 0.7; } 50% { opacity: 1; } 100% { transform: translateY(30px); opacity: 0; } }\n @keyframes bounceDown { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(6px); } }\n @keyframes fadeUp { to { opacity: 1; transform: translateX(-50%) translateY(0); } }\n\n @media (prefers-reduced-motion: reduce) {\n *, *::before, *::after {\n animation-duration: 0.001ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.001ms !important;\n scroll-behavior: auto !important;\n }\n }\n\n @media (max-width: 1024px) {\n .hero-container { padding: 2rem 6%; }\n .hero-content { max-width: 100%; }\n .hero-sub { max-width: 100%; }\n .tape-accent.top { top: 5%; right: 4%; width: 100px; }\n .tape-accent.bottom { display: none; }\n .hero-scrim { background: linear-gradient(180deg, rgba(0,40,66,0.55) 0%, rgba(0,40,66,0.82) 55%, rgba(0,40,66,0.9) 100%); }\n }\n\n \/* Celular optimizado: Centrado y en lista *\/\n @media (max-width: 768px) {\n .hero-container { padding: 3rem 5%; }\n .hero-content { align-items: center; text-align: center; }\n .hero-title { font-size: clamp(2.2rem, 9vw, 3rem); }\n .hero-specialty { justify-content: center; margin: 0 auto; }\n \n \/* En m\u00f3vil se listan uno debajo de otro perfectamente centrados *\/\n .hero-features-inline { \n flex-direction: column; \n align-items: center; \n text-align: center;\n gap: 12px; \n width: 100%;\n }\n .hero-features-inline .feat-divider { display: none; } \/* Quitamos c\u00edrculos divisores en m\u00f3vil *\/\n \n .btn-primary { width: 100%; justify-content: center; }\n .hero-actions { flex-direction: column; width: 100%; align-items: center; }\n .tape-accent.top { width: 80px; top: 4%; right: 4%; }\n .scroll-indicator { display: none; }\n }\n\n @media (max-width: 480px) {\n .hero-title { font-size: 1.9rem; }\n .hero-specialty { font-size: 0.85rem; }\n }\n <\/style>\n<\/head>\n<body>\n\n <section class=\"hero\">\n <div class=\"hero-curtain\"><\/div>\n\n <div class=\"hero-video-bg\">\n <video autoplay loop muted playsinline preload=\"auto\">\n <source src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/0_Active_Outdoor_1280x720.mp4\" type=\"video\/mp4\">\n <\/video>\n <\/div>\n\n <div class=\"hero-scrim\"><\/div>\n <div class=\"hero-light-sweep\"><\/div>\n <div class=\"hero-mouse-glow\"><\/div>\n <div class=\"hero-fade-out\"><\/div>\n\n <div class=\"hero-container\">\n <div class=\"hero-content\">\n\n <h1 class=\"hero-title\">\n <span class=\"title-line\">Se les acab\u00f3 su<\/span>\n <span class=\"highlight-wrap\"><span class=\"highlight\">gordito<\/span><\/span>\n <\/h1>\n\n <div class=\"hero-specialty\">\n <span class=\"dot\"><\/span>\n Cl\u00ednica especialista en nutrici\u00f3n y bariatr\u00eda en la CDMX\n <\/div>\n\n <p class=\"hero-sub\">\n Aqu\u00ed encontrar\u00e1s un equipo que te escucha, te orienta y dise\u00f1a un plan de acuerdo con tus necesidades\n <\/p>\n\n \n <div class=\"hero-features-inline\">\n <span class=\"feat\">Nutrici\u00f3n para bajar de peso<\/span>\n <span class=\"feat-divider\"><\/span>\n <span class=\"feat\">Tratamientos m\u00e9dicos para sobrepeso y obesidad<\/span>\n <span class=\"feat-divider\"><\/span>\n <span class=\"feat\">Resultados reales<\/span>\n <\/div>\n\n <div class=\"hero-actions\">\n <a class=\"btn-primary\" id=\"ctaBtn\"\n href=\"https:\/\/wa.link\/zvs595\"\n target=\"_blank\" rel=\"noopener noreferrer\">\n <i class=\"fab fa-whatsapp\"><\/i>\n Agendar una cita\n <span class=\"arrow\">\u2192<\/span>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"scroll-indicator\">\n <span>Scroll<\/span>\n <div class=\"line\"><\/div>\n <\/div>\n <\/section>\n\n <script>\n function splitLetters(el) {\n const text = el.textContent;\n el.setAttribute('aria-label', text);\n el.textContent = '';\n [...text].forEach((ch, i) => {\n const span = document.createElement('span');\n span.className = 'letter';\n span.textContent = ch === ' ' ? '\\u00A0' : ch;\n span.style.animationDelay = (0.9 + i * 0.032) + 's';\n el.appendChild(span);\n });\n }\n document.querySelectorAll('.title-line').forEach(splitLetters);\n\n document.addEventListener('DOMContentLoaded', () => {\n const hero = document.querySelector('.hero');\n const tapeTop = document.querySelector('.tape-accent.top');\n const tapeBottom = document.querySelector('.tape-accent.bottom');\n const highlight = document.querySelector('.highlight');\n const ctaBtn = document.getElementById('ctaBtn');\n\n hero?.addEventListener('mousemove', (e) => {\n const r = hero.getBoundingClientRect();\n hero.style.setProperty('--mx', (e.clientX - r.left) + 'px');\n hero.style.setProperty('--my', (e.clientY - r.top) + 'px');\n\n const relX = (e.clientX \/ window.innerWidth - 0.5);\n const relY = (e.clientY \/ window.innerHeight - 0.5);\n if (tapeTop) tapeTop.style.transform = `translate(${relX * 18}px, ${relY * 14}px)`;\n if (tapeBottom) tapeBottom.style.transform = `translate(${relX * -18}px, ${relY * -14}px)`;\n });\n\n highlight?.addEventListener('mouseenter', () => {\n highlight.classList.remove('jiggle');\n void highlight.offsetWidth;\n highlight.classList.add('jiggle');\n });\n\n ctaBtn?.addEventListener('mousemove', (e) => {\n const r = ctaBtn.getBoundingClientRect();\n const x = e.clientX - (r.left + r.width \/ 2);\n const y = e.clientY - (r.top + r.height \/ 2);\n ctaBtn.style.transform = `translate(${x * 0.15}px, ${y * 0.15}px) scale(1.02)`;\n });\n ctaBtn?.addEventListener('mouseleave', () => { ctaBtn.style.transform = ''; });\n });\n <\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c8c099c e-con-full e-flex e-con e-parent\" data-id=\"c8c099c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a2f52a4 elementor-widget elementor-widget-html\" data-id=\"a2f52a4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n<div class=\"tape-ticker-wrapper\">\n <div class=\"tape-ticker-container\">\n \n <div class=\"tape-ticker-track\">\n <div class=\"tape-item\">\n <span>Agenda tu consulta hoy por $1,000<\/span>\n <i class=\"fas fa-star-of-life badge-icon\"><\/i>\n <\/div>\n <div class=\"tape-item\">\n <span>Agenda tu consulta hoy por $1,000<\/span>\n <i class=\"fas fa-star-of-life badge-icon\"><\/i>\n <\/div>\n <div class=\"tape-item\">\n <span>Agenda tu consulta hoy por $1,000<\/span>\n <i class=\"fas fa-star-of-life badge-icon\"><\/i>\n <\/div>\n <div class=\"tape-item\">\n <span>Agenda tu consulta hoy por $1,000<\/span>\n <i class=\"fas fa-star-of-life badge-icon\"><\/i>\n <\/div>\n <div class=\"tape-item\">\n <span>Agenda tu consulta hoy por $1,000<\/span>\n <i class=\"fas fa-star-of-life badge-icon\"><\/i>\n <\/div>\n <div class=\"tape-item\">\n <span>Agenda tu consulta hoy por $1,000<\/span>\n <i class=\"fas fa-star-of-life badge-icon\"><\/i>\n <\/div>\n <\/div>\n \n \n <div class=\"tape-ticker-track\" aria-hidden=\"true\">\n <div class=\"tape-item\">\n <span>Agenda tu consulta hoy por $1,000<\/span>\n <i class=\"fas fa-star-of-life badge-icon\"><\/i>\n <\/div>\n <div class=\"tape-item\">\n <span>Agenda tu consulta hoy por $1,000<\/span>\n <i class=\"fas fa-star-of-life badge-icon\"><\/i>\n <\/div>\n <div class=\"tape-item\">\n <span>Agenda tu consulta hoy por $1,000<\/span>\n <i class=\"fas fa-star-of-life badge-icon\"><\/i>\n <\/div>\n <div class=\"tape-item\">\n <span>Agenda tu consulta hoy por $1,000<\/span>\n <i class=\"fas fa-star-of-life badge-icon\"><\/i>\n <\/div>\n <div class=\"tape-item\">\n <span>Agenda tu consulta hoy por $1,000<\/span>\n <i class=\"fas fa-star-of-life badge-icon\"><\/i>\n <\/div>\n <div class=\"tape-item\">\n <span>Agenda tu consulta hoy por $1,000<\/span>\n <i class=\"fas fa-star-of-life badge-icon\"><\/i>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<style>\n \/* Estilos del cintillo de cinta m\u00e9trica *\/\n .tape-ticker-wrapper {\n width: 100%;\n background: #002842; \/* Fondo oscuro de contraste para que resalte la cinta *\/\n padding: 25px 0;\n overflow: hidden;\n position: relative;\n display: flex;\n align-items: center;\n }\n\n .tape-ticker-container {\n width: 100%;\n background-color: #d2a750; \/* El color dorado\/amarillo base de tu paleta *\/\n height: 60px;\n position: relative;\n display: flex;\n align-items: center;\n overflow: hidden;\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);\n transform: rotate(-1.5deg) scale(1.02); \/* Ligera inclinaci\u00f3n para darle un toque m\u00e1s de dise\u00f1o org\u00e1nico *\/\n z-index: 10;\n }\n\n \/* Generaci\u00f3n de las l\u00edneas milim\u00e9tricas de la cinta m\u00e9trica en los bordes superior e inferior *\/\n .tape-ticker-container::before {\n content: '';\n position: absolute;\n inset: 0;\n \/* Genera las marcas negras alternando l\u00edneas largas y cortas usando CSS lineal *\/\n background-image: \n linear-gradient(90deg, #002842 2px, transparent 2px),\n linear-gradient(90deg, #002842 1px, transparent 1px);\n background-size: 40px 100%, 8px 100%;\n \/* Ajusta las marcas arriba (15px de alto) y abajo (15px de alto invertido) *\/\n mask-image: linear-gradient(to bottom, #fff 15px, transparent 15px, transparent calc(100% - 15px), #fff calc(100% - 15px));\n -webkit-mask-image: linear-gradient(to bottom, #fff 15px, transparent 15px, transparent calc(100% - 15px), #fff calc(100% - 15px));\n opacity: 0.75;\n z-index: 1;\n pointer-events: none;\n }\n\n \/* Contenedor animado infinito *\/\n .tape-ticker-track {\n display: flex;\n align-items: center;\n white-space: nowrap;\n animation: tapeMarquee 22s linear infinite;\n will-change: transform;\n }\n\n \/* Pausa sutil la animaci\u00f3n al pasar el mouse por encima para que sea interactivo *\/\n .tape-ticker-container:hover .tape-ticker-track {\n animation-play-state: paused;\n }\n\n \/* Cada bloque de texto individual dentro de la cinta *\/\n .tape-item {\n display: inline-flex;\n align-items: center;\n font-family: 'Lexend', sans-serif;\n font-weight: 800;\n font-size: 1.3rem;\n color: #002842; \/* Tu azul oscuro para m\u00e1xima legibilidad *\/\n padding: 0 40px;\n }\n\n \/* Icono separador din\u00e1mico entre repeticiones del texto *\/\n .badge-icon {\n margin-left: 40px;\n font-size: 1rem;\n color: #b37e34;\n animation: rotateIcon 6s linear infinite;\n }\n\n \/* Animaci\u00f3n fluida de desplazamiento horizontal *\/\n @keyframes tapeMarquee {\n 0% { transform: translateX(0%); }\n 100% { transform: translateX(-100%); }\n }\n\n \/* Rotaci\u00f3n constante para las estrellitas de separaci\u00f3n *\/\n @keyframes rotateIcon {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n\n \/* Ajustes espec\u00edficos para m\u00f3viles *\/\n @media (max-width: 768px) {\n .tape-ticker-container {\n height: 50px;\n transform: rotate(-1deg) scale(1.01); \/* Menos inclinaci\u00f3n en pantallas peque\u00f1as *\/\n }\n .tape-item {\n font-size: 1.05rem;\n padding: 0 25px;\n }\n .badge-icon {\n margin-left: 25px;\n font-size: 0.85rem;\n }\n .tape-ticker-container::before {\n background-size: 30px 100%, 6px 100%;\n mask-image: linear-gradient(to bottom, #fff 10px, transparent 10px, transparent calc(100% - 10px), #fff calc(100% - 10px));\n -webkit-mask-image: linear-gradient(to bottom, #fff 10px, transparent 10px, transparent calc(100% - 10px), #fff calc(100% - 10px));\n }\n }\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-143368a e-con-full e-flex e-con e-parent\" data-id=\"143368a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1a53db0 elementor-widget elementor-widget-html\" data-id=\"1a53db0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"why-section-container\">\n <style>\n .why-section-container {\n --why-color-01: #f3d8d1;\n --why-color-02: #e8afa7;\n --why-color-03: #002842;\n --why-color-04: #d2a750;\n --why-color-05: #b37e34;\n --why-color-06: #245080;\n --why-font-heading: 'Lexend', sans-serif;\n --why-font-body: 'Literata', serif;\n --why-blanco: #ffffff;\n --why-mx: 50%;\n --why-my: 50%;\n \n position: relative;\n padding: clamp(80px, 1vw, 150px) 6%;\n background: var(--why-color-01);\n overflow: hidden;\n width: 100%;\n font-family: var(--why-font-body);\n }\n\n \/* --- Glow c\u00e1lido que sigue al cursor --- *\/\n .why-section-container .why-glow {\n position: absolute; inset: 0; z-index: 0; pointer-events: none;\n background: radial-gradient(600px circle at var(--why-mx) var(--why-my), rgba(210, 167, 80, 0.12), transparent 65%);\n }\n\n \/* --- Formas decorativas flotantes --- *\/\n .why-section-container .why-blob { position: absolute; border-radius: 50%; filter: blur(2px); z-index: 0; pointer-events: none; }\n .why-section-container .why-blob.b1 { width: 380px; height: 380px; background: rgba(36, 80, 128, 0.06); top: -10%; right: -8%; animation: whyDrift 16s ease-in-out infinite; }\n .why-section-container .why-blob.b2 { width: 220px; height: 220px; background: rgba(232, 175, 167, 0.35); bottom: 4%; left: -6%; animation: whyDrift 13s ease-in-out infinite reverse; }\n .why-section-container .why-blob.b3 { width: 90px; height: 90px; background: rgba(210, 167, 80, 0.18); top: 18%; left: 8%; animation: whyDrift 9s ease-in-out infinite; }\n @keyframes whyDrift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(18px, -22px) scale(1.06); } }\n\n \/* --- Numeral gigante de fondo --- *\/\n .why-section-container .why-watermark {\n position: absolute; z-index: 0; pointer-events: none;\n top: -4%; left: 2%;\n font-family: var(--why-font-heading); font-weight: 900;\n font-size: clamp(9rem, 22vw, 20rem);\n color: rgba(36, 80, 128, 0.04);\n line-height: 1; user-select: none;\n animation: whyDrift 20s ease-in-out infinite;\n }\n\n .why-section-container .why-container { position: relative; z-index: 2; max-width: 1220px; margin: 0 auto; }\n \n \/* --- Encabezado CENTRADO --- *\/\n .why-section-container .why-header { max-width: 660px; margin-bottom: clamp(56px, 8vw, 88px); text-align: center; margin-left: auto; margin-right: auto;}\n\n .why-section-container .why-title {\n font-family: var(--why-font-heading); font-weight: 900;\n font-size: clamp(2.1rem, 4.4vw, 3.3rem); line-height: 1.12;\n letter-spacing: -1.2px; color: var(--why-color-03);\n margin: 0;\n }\n .why-section-container .why-title .word { display: inline-block; opacity: 0; transform: translateY(28px) rotateZ(3deg); }\n .why-section-container .why-title.in-view .word { animation: whyRevealUp 0.7s cubic-bezier(0.2,0.8,0.2,1) forwards; }\n\n .why-section-container .why-title .accent {\n position: relative; display: inline-block;\n background: linear-gradient(100deg, var(--why-color-05), var(--why-color-04) 40%, var(--why-color-02) 65%, var(--why-color-04) 90%);\n background-size: 220% auto;\n -webkit-background-clip: text; background-clip: text; color: transparent;\n }\n .why-section-container .why-title.in-view .accent { animation: whyRevealUp 0.7s cubic-bezier(0.2,0.8,0.2,1) forwards, whyShimmer 5s linear infinite 1s; }\n @keyframes whyShimmer { to { background-position: -220% center; } }\n\n .why-section-container .why-subtitle {\n font-family: var(--why-font-heading); font-weight: 300;\n font-size: clamp(1rem, 1.3vw, 1.15rem); color: var(--why-color-06);\n line-height: 1.75; margin-top: 20px; max-width: 520px;\n opacity: 0; transform: translateY(18px);\n margin-left: auto; margin-right: auto;\n }\n .why-section-container .why-subtitle.in-view { animation: whyRevealUp 0.75s ease forwards 0.15s; }\n\n @keyframes whyRevealUp { to { opacity: 1; transform: translateY(0) rotateZ(0); } }\n\n .why-section-container .why-content {\n display: grid;\n grid-template-columns: 1.1fr 0.9fr; \/* Ajustamos para dar m\u00e1s peso a la imagen *\/\n gap: clamp(40px, 6vw, 90px);\n align-items: center;\n }\n\n \/* --- VISUAL: imagen --- *\/\n .why-section-container .why-visual {\n position: relative;\n width: 100%; \n max-width: 540px; \/* Imagen m\u00e1s grande *\/\n margin: 0 auto;\n opacity: 0; transform: translateY(24px);\n }\n .why-section-container .why-visual.in-view { animation: whyRevealUp 0.8s cubic-bezier(0.2,0.8,0.2,1) forwards; }\n\n .why-section-container .why-visual::before {\n content: '';\n position: absolute;\n inset: 4% -12% -12% 4%;\n background: radial-gradient(circle at 30% 25%, rgba(210, 167, 80, 0.35), rgba(232, 175, 167, 0.45) 55%, transparent 78%);\n filter: blur(36px);\n border-radius: 50%;\n z-index: 0;\n }\n\n \/* Modificado: Ahora parpadea\/pulsa suavemente en lugar de girar *\/\n .why-section-container .why-visual .deco-ring {\n position: absolute; z-index: 1;\n width: 110%; height: 110%;\n top: -5%; left: -5%;\n border-radius: 50%;\n border: 1.5px dashed rgba(210, 167, 80, 0.6);\n animation: whyPulseRing 4s ease-in-out infinite;\n pointer-events: none;\n }\n @keyframes whyPulseRing {\n 0%, 100% { transform: scale(1); opacity: 0.4; }\n 50% { transform: scale(1.03); opacity: 0.95; }\n }\n\n .why-section-container .image-frame {\n position: relative; z-index: 2;\n border-radius: 24px;\n transform: perspective(1000px);\n transition: transform 0.25s ease-out;\n will-change: transform;\n }\n \n \/* Quitamos la animaci\u00f3n kenburns para que el PNG recortado no haga cosas raras *\/\n .why-section-container .image-frame img {\n width: 100%; height: auto; display: block;\n border: none;\n transition: transform 0.3s ease-out;\n }\n\n .why-section-container .visual-tape {\n position: absolute; z-index: 4; top: -18px; right: -20px; width: 78px;\n filter: drop-shadow(0 8px 18px rgba(0,0,0,0.2));\n opacity: 0;\n animation: whyTapeFade 0.7s ease forwards 1.1s, whyTapeFloat 4.2s ease-in-out infinite 1.8s;\n }\n .why-section-container .visual-tape img { width: 100%; height: auto; display: block; border: none;}\n @keyframes whyTapeFade { to { opacity: 0.95; } }\n @keyframes whyTapeFloat { 0%, 100% { transform: translateY(0) rotate(6deg); } 50% { transform: translateY(-10px) rotate(-4deg); } }\n\n \/* --- BENEFICIOS --- *\/\n .why-section-container .why-benefits { position: relative; display: flex; flex-direction: column; padding: 0; margin: 0; list-style: none;}\n\n .why-section-container .why-benefits::before {\n content: '';\n position: absolute; left: 27px; top: 30px; bottom: 30px; width: 2px;\n background: linear-gradient(180deg, var(--why-color-04), rgba(210, 167, 80, 0.15));\n opacity: 0; transform: scaleY(0); transform-origin: top;\n }\n .why-section-container .why-benefits.in-view::before { opacity: 1; animation: whyLineGrow 1.1s cubic-bezier(0.65,0,0.35,1) forwards 0.2s; }\n @keyframes whyLineGrow { to { transform: scaleY(1); } }\n\n .why-section-container .benefit-row {\n position: relative;\n display: flex; align-items: center; gap: 22px;\n padding: 20px 22px 20px 0;\n border-radius: 18px;\n opacity: 0; transform: translateX(36px);\n transition: background 0.35s ease, transform 0.35s cubic-bezier(0.2,0.8,0.2,1);\n cursor: default;\n }\n .why-section-container .why-benefits.in-view .benefit-row { animation: whyRowIn 0.75s cubic-bezier(0.2,0.8,0.2,1) forwards; }\n .why-section-container .why-benefits.in-view .benefit-row:nth-child(1) { animation-delay: 0.1s; }\n .why-section-container .why-benefits.in-view .benefit-row:nth-child(2) { animation-delay: 0.22s; }\n .why-section-container .why-benefits.in-view .benefit-row:nth-child(3) { animation-delay: 0.34s; }\n @keyframes whyRowIn { to { opacity: 1; transform: translateX(0); } }\n\n .why-section-container .benefit-row:hover { background: rgba(255, 255, 255, 0.55); transform: translateX(8px); }\n\n .why-section-container .benefit-icon {\n position: relative; z-index: 2; flex: none;\n width: 58px; height: 58px;\n display: flex; align-items: center; justify-content: center;\n }\n .why-section-container .benefit-icon .icon-ring {\n position: absolute; inset: 0; width: 100%; height: 100%;\n transform: rotate(-90deg);\n }\n .why-section-container .benefit-icon .icon-ring circle {\n fill: none; stroke: var(--why-color-04); stroke-width: 2;\n stroke-dasharray: 170; stroke-dashoffset: 170;\n transition: stroke-dashoffset 1s cubic-bezier(0.65,0,0.35,1);\n }\n .why-section-container .why-benefits.in-view .benefit-row:nth-child(1) .icon-ring circle { stroke-dashoffset: 0; transition-delay: 0.35s; }\n .why-section-container .why-benefits.in-view .benefit-row:nth-child(2) .icon-ring circle { stroke-dashoffset: 0; transition-delay: 0.47s; }\n .why-section-container .why-benefits.in-view .benefit-row:nth-child(3) .icon-ring circle { stroke-dashoffset: 0; transition-delay: 0.59s; }\n\n .why-section-container .benefit-icon .icon-core {\n position: relative; z-index: 2;\n width: 44px; height: 44px; border-radius: 50%;\n background: var(--why-blanco);\n display: flex; align-items: center; justify-content: center;\n font-size: 1.05rem; color: var(--why-color-04);\n box-shadow: 0 10px 26px rgba(0, 40, 66, 0.1);\n transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, color 0.3s ease;\n }\n .why-section-container .benefit-row:hover .icon-core {\n transform: rotate(-8deg) scale(1.12);\n background: linear-gradient(135deg, var(--why-color-04), var(--why-color-05));\n color: var(--why-blanco);\n }\n\n .why-section-container .benefit-text {\n font-family: var(--why-font-heading); font-weight: 600;\n font-size: clamp(1.02rem, 1.5vw, 1.2rem); color: var(--why-color-03);\n line-height: 1.4;\n }\n\n \/* Responsive *\/\n @media (max-width: 900px) {\n .why-section-container .why-content { \n grid-template-columns: 1fr; \n gap: 48px; \n direction: rtl; \n }\n .why-section-container .why-visual,\n .why-section-container .why-benefits {\n direction: ltr;\n }\n .why-section-container .why-visual { max-width: 380px; }\n .why-section-container .why-header { text-align: center; }\n .why-section-container .benefit-row { justify-content: center; text-align: center; padding-right: 0; }\n .why-section-container .why-benefits::before { display: none; }\n }\n\n @media (max-width: 560px) {\n .why-section-container .benefit-row { gap: 16px; padding: 16px 0; }\n .why-section-container .benefit-icon { width: 50px; height: 50px; }\n .why-section-container .benefit-icon .icon-core { width: 38px; height: 38px; font-size: 0.9rem; }\n .why-section-container .visual-tape { width: 56px; top: -12px; right: -10px; }\n }\n <\/style>\n\n <div class=\"why-glow\"><\/div>\n <div class=\"why-blob b1\"><\/div>\n <div class=\"why-blob b2\"><\/div>\n <div class=\"why-blob b3\"><\/div>\n <div class=\"why-watermark\">\u00bf?<\/div>\n\n <div class=\"why-container\">\n <div class=\"why-header\">\n <h2 class=\"why-title why-reveal\" id=\"whySectionTitle\">\u00bfPor qu\u00e9 atenderte con <span class=\"accent\">nosotros<\/span>?<\/h2>\n <p class=\"why-subtitle why-reveal\">\n Nuestro compromiso es ayudarte a encontrar la mejor alternativa para mejorar tu bienestar\n <\/p>\n <\/div>\n\n <div class=\"why-content\">\n <div class=\"why-visual why-reveal\">\n <div class=\"deco-ring\"><\/div>\n <div class=\"image-frame\" id=\"whyImageFrame\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/2150738594-1.webp\" alt=\"Bajar de Peso - Cl\u00ednica Bari\u00e1trica\">\n <\/div>\n <\/div>\n\n <ul class=\"why-benefits why-reveal\">\n <li class=\"benefit-row\">\n <div class=\"benefit-icon\">\n <svg class=\"icon-ring\" viewBox=\"0 0 58 58\"><circle cx=\"29\" cy=\"29\" r=\"27\"\/><\/svg>\n <div class=\"icon-core\"><i class=\"fas fa-award\"><\/i><\/div>\n <\/div>\n <div class=\"benefit-text\">M\u00e1s de 7 a\u00f1os de experiencia<\/div>\n <\/li>\n <li class=\"benefit-row\">\n <div class=\"benefit-icon\">\n <svg class=\"icon-ring\" viewBox=\"0 0 58 58\"><circle cx=\"29\" cy=\"29\" r=\"27\"\/><\/svg>\n <div class=\"icon-core\"><i class=\"fas fa-user-doctor\"><\/i><\/div>\n <\/div>\n <div class=\"benefit-text\">Equipo m\u00e9dico especializado en bari\u00e1trica<\/div>\n <\/li>\n <li class=\"benefit-row\">\n <div class=\"benefit-icon\">\n <svg class=\"icon-ring\" viewBox=\"0 0 58 58\"><circle cx=\"29\" cy=\"29\" r=\"27\"\/><\/svg>\n <div class=\"icon-core\"><i class=\"fas fa-hands-holding-circle\"><\/i><\/div>\n <\/div>\n <div class=\"benefit-text\">Acompa\u00f1amiento antes y despu\u00e9s del procedimiento<\/div>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n <script>\n (function() {\n const container = document.querySelector('.why-section-container');\n \n (function splitWords() {\n const el = container.querySelector('#whySectionTitle');\n if(!el) return;\n const nodes = Array.from(el.childNodes);\n el.innerHTML = '';\n let wordIndex = 0;\n nodes.forEach(node => {\n if (node.nodeType === Node.TEXT_NODE) {\n node.textContent.split(\/(\\s+)\/).forEach(chunk => {\n if (chunk.trim() === '') { el.appendChild(document.createTextNode(chunk)); return; }\n const span = document.createElement('span');\n span.className = 'word';\n span.textContent = chunk;\n span.style.animationDelay = (wordIndex * 0.06) + 's';\n wordIndex++;\n el.appendChild(span);\n });\n } else {\n node.style.animationDelay = (wordIndex * 0.06) + 's';\n wordIndex++;\n el.appendChild(node);\n }\n });\n })();\n\n const revealObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('in-view');\n revealObserver.unobserve(entry.target);\n }\n });\n }, { threshold: 0.15 });\n container.querySelectorAll('.why-reveal').forEach(el => revealObserver.observe(el));\n\n container.addEventListener('mousemove', (e) => {\n const r = container.getBoundingClientRect();\n container.style.setProperty('--why-mx', (e.clientX - r.left) + 'px');\n container.style.setProperty('--why-my', (e.clientY - r.top) + 'px');\n });\n\n const frame = container.querySelector('#whyImageFrame');\n frame?.addEventListener('mousemove', (e) => {\n const r = frame.getBoundingClientRect();\n const px = (e.clientX - r.left) \/ r.width - 0.5;\n const py = (e.clientY - r.top) \/ r.height - 0.5;\n frame.style.transform = `perspective(1000px) rotateX(${py * -8}deg) rotateY(${px * 8}deg) scale(1.02)`;\n });\n frame?.addEventListener('mouseleave', () => {\n frame.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) scale(1)';\n });\n })();\n <\/script>\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a75b405 e-con-full e-flex e-con e-parent\" data-id=\"a75b405\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e3a98fb elementor-widget elementor-widget-html\" data-id=\"e3a98fb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Especialistas \u00b7 3D Card Hover<\/title>\n\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Lexend:wght@300;400;500;600;700;800;900&family=Literata:ital,wght@0,400;0,600;0,700;1,400&display=swap\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\n\n <style>\n \n :root {\n --color-01: #f3d8d1;\n --color-02: #e8afa7;\n --color-03: #002842;\n --color-04: #d2a750;\n --color-05: #b37e34;\n --color-06: #245080;\n --font-heading: 'Lexend', sans-serif;\n --font-body: 'Literata', serif;\n --blanco: #ffffff;\n\n \/* Variables para efecto 3D *\/\n --card-height: 280px;\n --card-width: calc(var(--card-height) \/ 1.3);\n --spec-mx: 50%;\n --spec-my: 50%;\n }\n\n * { margin: 0; padding: 0; box-sizing: border-box; }\n\n body {\n font-family: var(--font-body);\n background: var(--color-01);\n overflow-x: hidden;\n }\n\n \/* ============================================\n SECCI\u00d3N ESPECIALIDADES\n ============================================ *\/\n .spec-section {\n position: relative;\n padding: clamp(60px, 10vw, 120px) 6%;\n background: var(--color-01);\n overflow: hidden;\n }\n\n \/* --- Fondo con parallax --- *\/\n .spec-parallax-bg {\n position: absolute;\n top: -12%;\n left: 0;\n width: 100%;\n height: 124%;\n z-index: 0;\n pointer-events: none;\n background-image: url('https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/9635-1.webp');\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n will-change: transform;\n transform: translateY(0);\n }\n\n \/* Velo sobre la imagen para mantener la legibilidad del contenido *\/\n .spec-parallax-overlay {\n position: absolute;\n inset: -12% 0;\n z-index: 0;\n pointer-events: none;\n background:\n linear-gradient(180deg, var(--color-01) 0%, rgba(243, 216, 209, 0.1) 12%, rgba(243, 216, 209, 0.42) 88%, var(--color-01) 100%);\n }\n\n \/* --- Glow interactivo --- *\/\n .spec-glow {\n position: absolute;\n inset: 0;\n z-index: 1;\n pointer-events: none;\n background: radial-gradient(500px circle at var(--spec-mx) var(--spec-my), rgba(210, 167, 80, 0.12), transparent 70%);\n }\n\n \/* --- Blobs decorativos --- *\/\n .spec-blob {\n position: absolute;\n border-radius: 50%;\n filter: blur(40px);\n z-index: 1;\n pointer-events: none;\n opacity: 0.3;\n }\n .spec-blob.b1 { width: 300px; height: 300px; background: var(--color-04); top: -5%; left: -5%; animation: specFloat 14s ease-in-out infinite; }\n .spec-blob.b2 { width: 250px; height: 250px; background: var(--color-06); bottom: -5%; right: -5%; animation: specFloat 12s ease-in-out infinite reverse; }\n @keyframes specFloat { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(15px, -15px) scale(1.05); } }\n\n .spec-wrapper {\n position: relative;\n z-index: 2;\n max-width: 1100px;\n margin: 0 auto;\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n\n \/* ============================================\n ENCABEZADO\n ============================================ *\/\n .spec-main-title {\n font-family: var(--font-heading);\n font-weight: 800;\n font-size: clamp(1.8rem, 3.5vw, 2.6rem);\n color: var(--color-03);\n line-height: 1.25;\n text-align: center;\n max-width: 850px;\n margin: 0 auto 50px auto;\n opacity: 0;\n transform: translateY(30px);\n }\n\n .spec-main-title .accent {\n color: var(--color-04);\n position: relative;\n }\n .spec-main-title .accent::after {\n content: '';\n position: absolute;\n left: 0;\n bottom: 2px;\n width: 100%;\n height: 8px;\n background: rgba(210, 167, 80, 0.15);\n border-radius: 8px;\n z-index: -1;\n transform: skewX(-6deg);\n }\n\n .spec-main-title.in-view {\n opacity: 1;\n transform: translateY(0);\n transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);\n }\n\n \/* MODIFICADO: Se a\u00f1ade el efecto de fondo de cristal (Glassmorphism) *\/\n .spec-footer-text {\n font-family: var(--font-body);\n font-weight: 400;\n font-size: clamp(1.05rem, 1.4vw, 1.25rem);\n color: var(--color-03); \/* Se cambi\u00f3 a un tono ligeramente m\u00e1s oscuro para mejor legibilidad *\/\n line-height: 1.6;\n text-align: center;\n max-width: 780px;\n margin: 60px auto 40px auto;\n opacity: 0;\n transform: translateY(25px);\n\n \/* Propiedades del efecto cristal *\/\n background: rgba(255, 255, 255, 0.35); \/* Fondo blanco con 35% de opacidad *\/\n backdrop-filter: blur(12px); \/* El desenfoque del fondo *\/\n -webkit-backdrop-filter: blur(12px); \/* Compatibilidad con Safari *\/\n padding: 24px 32px; \/* Espaciado interno para separar el texto del borde *\/\n border-radius: 16px; \/* Bordes redondeados sutiles *\/\n border: 1px solid rgba(255, 255, 255, 0.45); \/* Borde blanco semi-transparente *\/\n box-shadow: 0 8px 32px 0 rgba(0, 40, 66, 0.05); \/* Sombra muy suave para dar profundidad *\/\n }\n\n .spec-footer-text.in-view {\n opacity: 1;\n transform: translateY(0);\n transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s;\n }\n\n \/* ============================================\n GRID DE TARJETAS 3D\n ============================================ *\/\n .spec-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 24px;\n width: 100%;\n padding: 0;\n margin: 0;\n list-style: none;\n }\n\n \/* ============================================\n TARJETA 3D (Efecto hover estilo Mythrill)\n ============================================ *\/\n .spec-card {\n width: 100%;\n height: var(--card-height);\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n padding: 24px 16px;\n perspective: 2500px;\n background: var(--blanco);\n border-radius: 20px;\n box-shadow: 0 10px 30px rgba(0, 40, 66, 0.04);\n border: 1px solid rgba(255, 255, 255, 0.6);\n opacity: 0;\n transform: translateY(40px) scale(0.95);\n transition: box-shadow 0.4s ease, border 0.4s ease;\n }\n\n .spec-grid.in-view .spec-card {\n opacity: 1;\n transform: translateY(0) scale(1);\n transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease, border 0.4s ease;\n }\n\n \/* Delays escalonados *\/\n .spec-grid.in-view .spec-card:nth-child(1) { transition-delay: 0.05s; }\n .spec-grid.in-view .spec-card:nth-child(2) { transition-delay: 0.12s; }\n .spec-grid.in-view .spec-card:nth-child(3) { transition-delay: 0.19s; }\n .spec-grid.in-view .spec-card:nth-child(4) { transition-delay: 0.26s; }\n .spec-grid.in-view .spec-card:nth-child(5) { transition-delay: 0.33s; }\n .spec-grid.in-view .spec-card:nth-child(6) { transition-delay: 0.40s; }\n .spec-grid.in-view .spec-card:nth-child(7) { transition-delay: 0.47s; }\n .spec-grid.in-view .spec-card:nth-child(8) { transition-delay: 0.54s; }\n\n \/* ===== EFECTO 3D HOVER ===== *\/\n .spec-card .card-wrapper {\n transition: all 0.5s;\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n z-index: 0;\n border-radius: 20px;\n overflow: hidden;\n background: var(--blanco);\n }\n\n .spec-card .card-wrapper .card-bg {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n opacity: 0.04;\n transition: opacity 0.5s ease;\n }\n\n .spec-card:hover .card-wrapper {\n transform: perspective(900px) translateY(-5%) rotateX(20deg) translateZ(0);\n box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.2);\n }\n\n .spec-card .card-wrapper::before,\n .spec-card .card-wrapper::after {\n content: \"\";\n opacity: 0;\n width: 100%;\n height: 80px;\n transition: all 0.5s;\n position: absolute;\n left: 0;\n }\n .spec-card .card-wrapper::before {\n top: 0;\n height: 100%;\n background-image: linear-gradient(\n to top,\n transparent 46%,\n rgba(210, 167, 80, 0.08) 68%,\n rgba(210, 167, 80, 0.15) 97%\n );\n }\n .spec-card .card-wrapper::after {\n bottom: 0;\n opacity: 1;\n background-image: linear-gradient(\n to bottom,\n transparent 46%,\n rgba(210, 167, 80, 0.08) 68%,\n rgba(210, 167, 80, 0.15) 97%\n );\n }\n\n .spec-card:hover .card-wrapper::before,\n .spec-card:hover .card-wrapper::after {\n opacity: 1;\n }\n\n .spec-card:hover .card-wrapper::after {\n height: 120px;\n }\n\n \/* ===== CONTENIDO DE LA TARJETA (se eleva en 3D) ===== *\/\n .spec-card .card-content {\n position: relative;\n z-index: 2;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n transition: transform 0.5s;\n width: 100%;\n height: 100%;\n }\n\n .spec-card:hover .card-content {\n transform: translate3d(0%, -8px, 60px);\n }\n\n \/* Icono *\/\n .spec-card .spec-icon-wrapper {\n width: 70px;\n height: 70px;\n margin-bottom: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 16px;\n background: rgba(243, 216, 209, 0.4);\n transition: background 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\n }\n\n .spec-card:hover .spec-icon-wrapper {\n background: rgba(210, 167, 80, 0.15);\n transform: scale(1.15) rotate(4deg);\n }\n\n .spec-card .spec-icon-wrapper img {\n width: 44px;\n height: 44px;\n object-fit: contain;\n transition: filter 0.3s ease;\n }\n\n \/* T\u00edtulo *\/\n .spec-card .spec-card-title {\n font-family: var(--font-heading);\n font-weight: 600;\n font-size: 1.05rem;\n color: var(--color-03);\n margin: 0;\n padding: 0;\n transition: color 0.3s ease;\n text-align: center;\n }\n\n .spec-card:hover .spec-card-title {\n color: var(--color-04);\n }\n\n \/* N\u00famero decorativo que aparece en hover *\/\n .spec-card .card-number {\n position: absolute;\n bottom: 12px;\n right: 16px;\n font-family: var(--font-heading);\n font-weight: 900;\n font-size: 0.7rem;\n color: rgba(210, 167, 80, 0.08);\n transition: all 0.4s ease;\n letter-spacing: 1px;\n }\n\n .spec-card:hover .card-number {\n color: rgba(210, 167, 80, 0.2);\n transform: scale(1.2);\n }\n\n \/* ============================================\n BOT\u00d3N CTA\n ============================================ *\/\n .spec-btn-container {\n opacity: 0;\n transform: translateY(20px);\n }\n\n .spec-btn-container.in-view {\n opacity: 1;\n transform: translateY(0);\n transition: opacity 0.6s ease 0.6s, transform 0.6s ease 0.6s;\n }\n\n .spec-cta-btn {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n background: linear-gradient(135deg, var(--color-04), var(--color-05));\n color: var(--blanco);\n font-family: var(--font-heading);\n font-weight: 600;\n font-size: 1.05rem;\n padding: 16px 40px;\n border-radius: 50px;\n text-decoration: none !important;\n box-shadow: 0 10px 25px rgba(179, 126, 52, 0.35);\n transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease, filter 0.3s ease;\n border: none;\n cursor: pointer;\n }\n\n .spec-cta-btn i {\n transition: transform 0.3s ease;\n }\n\n .spec-cta-btn:hover {\n transform: translateY(-3px);\n box-shadow: 0 14px 30px rgba(179, 126, 52, 0.5);\n filter: brightness(1.05);\n color: #000;\n }\n\n .spec-cta-btn:hover i {\n transform: translateX(5px);\n }\n\n \/* ============================================\n RESPONSIVE\n ============================================ *\/\n @media (max-width: 1024px) {\n .spec-grid {\n grid-template-columns: repeat(3, 1fr);\n gap: 20px;\n }\n :root {\n --card-height: 250px;\n }\n }\n\n @media (max-width: 768px) {\n .spec-section {\n padding: 50px 4%;\n }\n .spec-grid {\n grid-template-columns: repeat(2, 1fr);\n gap: 16px;\n }\n :root {\n --card-height: 220px;\n }\n .spec-card .spec-icon-wrapper {\n width: 56px;\n height: 56px;\n }\n .spec-card .spec-icon-wrapper img {\n width: 34px;\n height: 34px;\n }\n .spec-card .spec-card-title {\n font-size: 0.9rem;\n }\n \/* Adaptaci\u00f3n del bloque de cristal en m\u00f3viles *\/\n .spec-footer-text {\n padding: 20px 24px;\n margin: 40px auto 30px auto;\n }\n }\n\n @media (max-width: 480px) {\n .spec-section {\n padding: 40px 4%;\n }\n .spec-grid {\n grid-template-columns: 1fr 1fr;\n gap: 12px;\n }\n :root {\n --card-height: 190px;\n }\n .spec-card .spec-icon-wrapper {\n width: 44px;\n height: 44px;\n margin-bottom: 10px;\n }\n .spec-card .spec-icon-wrapper img {\n width: 28px;\n height: 28px;\n }\n .spec-card .spec-card-title {\n font-size: 0.75rem;\n }\n .spec-card .card-number {\n display: none;\n }\n .spec-cta-btn {\n width: 100%;\n justify-content: center;\n font-size: 0.9rem;\n padding: 14px 24px;\n }\n .spec-footer-text {\n margin: 30px auto 25px auto;\n padding: 16px 20px;\n }\n }\n\n @media (max-width: 380px) {\n .spec-grid {\n grid-template-columns: 1fr 1fr;\n gap: 8px;\n }\n :root {\n --card-height: 170px;\n }\n .spec-card {\n padding: 16px 10px;\n border-radius: 14px;\n }\n .spec-card .spec-icon-wrapper {\n width: 36px;\n height: 36px;\n }\n .spec-card .spec-icon-wrapper img {\n width: 22px;\n height: 22px;\n }\n .spec-card .spec-card-title {\n font-size: 0.65rem;\n }\n }\n\n \/* Respeta preferencia de movimiento reducido *\/\n @media (prefers-reduced-motion: reduce) {\n .spec-parallax-bg { transform: none !important; }\n }\n <\/style>\n<\/head>\n<body>\n\n <section class=\"spec-section\">\n \n <div class=\"spec-parallax-bg\" id=\"specParallaxBg\"><\/div>\n <div class=\"spec-parallax-overlay\"><\/div>\n\n \n <div class=\"spec-glow\"><\/div>\n\n \n <div class=\"spec-blob b1\"><\/div>\n <div class=\"spec-blob b2\"><\/div>\n\n <div class=\"spec-wrapper\">\n \n <h2 class=\"spec-main-title spec-reveal\">\n Somos especialistas en las enfermedades asociadas al <span class=\"accent\">sobrepeso y la obesidad<\/span>\n <\/h2>\n\n \n <ul class=\"spec-grid spec-reveal\">\n \n <li class=\"spec-card\">\n <div class=\"card-wrapper\">\n <div class=\"card-bg\"><\/div>\n <\/div>\n <div class=\"card-content\">\n <div class=\"spec-icon-wrapper\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2025\/12\/obesity-1.svg\" alt=\"Sobrepeso\">\n <\/div>\n <h3 class=\"spec-card-title\">Sobrepeso<\/h3>\n <\/div>\n <\/li>\n\n \n <li class=\"spec-card\">\n <div class=\"card-wrapper\">\n <div class=\"card-bg\"><\/div>\n <\/div>\n <div class=\"card-content\">\n <div class=\"spec-icon-wrapper\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2025\/12\/obesity.svg\" alt=\"Obesidad\">\n <\/div>\n <h3 class=\"spec-card-title\">Obesidad<\/h3>\n <\/div>\n <\/li>\n\n \n <li class=\"spec-card\">\n <div class=\"card-wrapper\">\n <div class=\"card-bg\"><\/div>\n <\/div>\n <div class=\"card-content\">\n <div class=\"spec-icon-wrapper\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2025\/12\/glucose-meter.svg\" alt=\"Diabetes\">\n <\/div>\n <h3 class=\"spec-card-title\">Diabetes<\/h3>\n <\/div>\n <\/li>\n\n \n <li class=\"spec-card\">\n <div class=\"card-wrapper\">\n <div class=\"card-bg\"><\/div>\n <\/div>\n <div class=\"card-content\">\n <div class=\"spec-icon-wrapper\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2025\/12\/adrenaline.svg\" alt=\"Hipertensi\u00f3n\">\n <\/div>\n <h3 class=\"spec-card-title\">Hipertensi\u00f3n<\/h3>\n <\/div>\n <\/li>\n\n \n <li class=\"spec-card\">\n <div class=\"card-wrapper\">\n <div class=\"card-bg\"><\/div>\n <\/div>\n <div class=\"card-content\">\n <div class=\"spec-icon-wrapper\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2025\/12\/endocrine-system.svg\" alt=\"Hipotiroidismo\">\n <\/div>\n <h3 class=\"spec-card-title\">Hipotiroidismo<\/h3>\n <\/div>\n <\/li>\n\n \n <li class=\"spec-card\">\n <div class=\"card-wrapper\">\n <div class=\"card-bg\"><\/div>\n <\/div>\n <div class=\"card-content\">\n <div class=\"spec-icon-wrapper\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2025\/12\/tubal-ligation.svg\" alt=\"Ovario poliqu\u00edstico\">\n <\/div>\n <h3 class=\"spec-card-title\">Ovario poliqu\u00edstico<\/h3>\n <\/div>\n <\/li>\n\n \n <li class=\"spec-card\">\n <div class=\"card-wrapper\">\n <div class=\"card-bg\"><\/div>\n <\/div>\n <div class=\"card-content\">\n <div class=\"spec-icon-wrapper\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2025\/12\/fertilization.svg\" alt=\"Fertilidad\">\n <\/div>\n <h3 class=\"spec-card-title\">Fertilidad<\/h3>\n <\/div>\n <\/li>\n\n \n <li class=\"spec-card\">\n <div class=\"card-wrapper\">\n <div class=\"card-bg\"><\/div>\n <\/div>\n <div class=\"card-content\">\n <div class=\"spec-icon-wrapper\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2025\/12\/vaccine.svg\" alt=\"Resistencia a la insulina\">\n <\/div>\n <h3 class=\"spec-card-title\">Resistencia a la insulina<\/h3>\n <\/div>\n <\/li>\n <\/ul>\n\n \n <p class=\"spec-footer-text spec-reveal\">\n Cada persona tiene necesidades diferentes. Nuestro objetivo es ayudarte a encontrar el tratamiento m\u00e1s adecuado para ti\n <\/p>\n\n \n <div class=\"spec-btn-container spec-reveal\">\n <a href=\"https:\/\/wa.link\/zvs595\" \n target=\"_blank\" \n rel=\"noopener noreferrer\" \n class=\"spec-cta-btn\">\n Agendar una cita aqu\u00ed <i class=\"fa-solid fa-arrow-right\"><\/i>\n <\/a>\n <\/div>\n <\/div>\n <\/section>\n \n\n <script>\n (function() {\n const scope = document.querySelector('.spec-section');\n if (!scope) return;\n const parallaxBg = document.getElementById('specParallaxBg');\n const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n \/\/ 1. Efecto Glow que sigue al cursor\n scope.addEventListener('mousemove', (e) => {\n const rect = scope.getBoundingClientRect();\n scope.style.setProperty('--spec-mx', (e.clientX - rect.left) + 'px');\n scope.style.setProperty('--spec-my', (e.clientY - rect.top) + 'px');\n });\n\n \/\/ 2. Observer para animaciones al hacer scroll\n const observerOptions = { threshold: 0.1, rootMargin: \"0px 0px -20px 0px\" };\n const specObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('in-view');\n specObserver.unobserve(entry.target);\n }\n });\n }, observerOptions);\n\n \/\/ Observar elementos\n scope.querySelectorAll('.spec-reveal, .spec-grid').forEach(element => {\n specObserver.observe(element);\n });\n\n \/\/ 3. Efecto 3D adicional: cada tarjeta responde al mouse individualmente\n const cards = scope.querySelectorAll('.spec-card');\n cards.forEach(card => {\n card.addEventListener('mousemove', (e) => {\n const rect = card.getBoundingClientRect();\n const x = (e.clientX - rect.left) \/ rect.width - 0.5;\n const y = (e.clientY - rect.top) \/ rect.height - 0.5;\n card.style.setProperty('--rotate-x', y * 6 + 'deg');\n card.style.setProperty('--rotate-y', x * -6 + 'deg');\n });\n card.addEventListener('mouseleave', () => {\n card.style.setProperty('--rotate-x', '0deg');\n card.style.setProperty('--rotate-y', '0deg');\n });\n });\n\n \/\/ 4. Parallax del fondo al hacer scroll\n if (parallaxBg && !reduceMotion) {\n const PARALLAX_STRENGTH = 0.18;\n\n let ticking = false;\n function updateParallax() {\n const rect = scope.getBoundingClientRect();\n const viewportCenter = window.innerHeight \/ 2;\n const sectionCenter = rect.top + rect.height \/ 2;\n const offset = (viewportCenter - sectionCenter) * PARALLAX_STRENGTH;\n parallaxBg.style.transform = `translateY(${offset}px)`;\n ticking = false;\n }\n\n window.addEventListener('scroll', () => {\n if (!ticking) {\n requestAnimationFrame(updateParallax);\n ticking = true;\n }\n }, { passive: true });\n\n window.addEventListener('resize', () => {\n requestAnimationFrame(updateParallax);\n });\n\n updateParallax();\n }\n })();\n <\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-09ae793 e-con-full e-flex e-con e-parent\" data-id=\"09ae793\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f04d7eb elementor-widget elementor-widget-html\" data-id=\"f04d7eb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"consult-wp-section\" id=\"consultas\">\n\n <style>\n .consult-wp-section {\n --c-blush: #f3d8d1;\n --c-rose: #e8afa7;\n --c-navy: #002842;\n --c-gold: #d2a750;\n --c-gold-deep: #b37e34;\n --c-blue: #245080;\n --font-display: 'Literata', serif;\n --font-body: 'Lexend', sans-serif;\n\n font-family: var(--font-body);\n color: var(--c-navy);\n position: relative;\n background: #fbeee9;\n padding: 3rem 1.5rem; \/* Ajustado para que no cree un hueco enorme *\/\n overflow: hidden;\n margin-top: 0 !important; \/* Eliminado el margen superior *\/\n margin-bottom: 0 !important; \/* Eliminado el margen inferior *\/\n }\n\n \/* MESH BACKGROUND *\/\n .consult-wp-section .mesh{\n position:absolute;\n inset:0;\n z-index:0;\n pointer-events:none;\n overflow: hidden;\n }\n .consult-wp-section .mesh span{\n position:absolute;\n border-radius:50%;\n filter: blur(50px);\n opacity:.5;\n animation: blobMoveWP 16s ease-in-out infinite;\n mix-blend-mode: multiply;\n }\n .consult-wp-section .mesh span:nth-child(1){ width:420px; height:420px; background:var(--c-rose); top:-140px; left:-120px; animation-delay:0s; }\n .consult-wp-section .mesh span:nth-child(2){ width:340px; height:340px; background:var(--c-gold); top:220px; right:-140px; animation-delay:3.2s; animation-duration:20s; }\n .consult-wp-section .mesh span:nth-child(3){ width:260px; height:260px; background:var(--c-blue); opacity:.14; bottom:-80px; left:30%; animation-delay:6s; animation-duration:22s; }\n \n @keyframes blobMoveWP{\n 0%,100%{ transform: translate(0,0) scale(1); }\n 33%{ transform: translate(30px,-25px) scale(1.08); }\n 66%{ transform: translate(-20px,20px) scale(.95); }\n }\n\n .consult-wp-section .grain{\n position:absolute; inset:0; z-index:0;\n opacity:.05; pointer-events:none;\n background-image:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'\/%3E%3C\/svg%3E\");\n }\n\n \/* LLUVIA DE FLORES ANIMADA *\/\n .flower-particle {\n position: absolute;\n top: -10%;\n z-index: 1;\n pointer-events: none;\n fill: var(--c-rose);\n opacity: 0.7;\n animation: rainFlowerWP linear infinite;\n }\n @keyframes rainFlowerWP {\n 0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }\n 10% { opacity: 0.8; }\n 90% { opacity: 0.4; }\n 100% { transform: translateY(110vh) translateX(80px) rotate(720deg); opacity: 0; }\n }\n\n .consult-wp-section .wrap{\n max-width: 1160px;\n margin: 0 auto;\n position:relative;\n z-index:2;\n }\n\n .consult-wp-section .head-block{\n text-align:center;\n opacity:0; transform: translateY(20px);\n transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);\n }\n .consult-wp-section .head-block.is-visible{ opacity:1; transform:none; }\n\n .consult-wp-section .eyebrow{\n display:inline-flex;\n align-items:center;\n gap:.5rem;\n font-family: var(--font-body);\n font-weight:600;\n font-size:.8rem;\n letter-spacing:.08em;\n color: var(--c-gold-deep);\n background: #fff;\n border: 1px solid var(--c-rose);\n padding: .5rem 1.15rem;\n border-radius: 999px;\n margin-bottom: 1.7rem;\n box-shadow: 0 8px 20px -12px rgba(179,126,52,.4);\n }\n .consult-wp-section .eyebrow svg{ width:13px; height:13px; animation: spinWP 6s linear infinite; }\n @keyframes spinWP{ to{ transform: rotate(360deg); } }\n\n .consult-wp-section .head-block h2{\n font-family: var(--font-display);\n font-weight: 500;\n font-size: clamp(2.2rem, 4.2vw, 3.2rem);\n line-height:1.16;\n color: var(--c-navy);\n max-width: 20ch;\n margin: 0 auto;\n }\n .consult-wp-section .head-block h2 em{\n font-style: italic;\n background: linear-gradient(100deg, var(--c-gold-deep), var(--c-gold) 40%, var(--c-gold-deep));\n background-size: 220% 100%;\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n animation: shimmerTextWP 5s ease-in-out infinite;\n }\n @keyframes shimmerTextWP{\n 0%,100%{ background-position: 0% 50%; }\n 50%{ background-position: 100% 50%; }\n }\n\n .consult-wp-section .head-block p{\n margin: 1.3rem auto 0;\n max-width: 46ch;\n font-size: 1.05rem;\n line-height:1.7;\n color: #5c6b78;\n }\n\n .consult-wp-section .content-grid{\n margin-top: 3.6rem;\n display:grid;\n grid-template-columns: .8fr 1.2fr;\n gap: 1.6rem;\n align-items:stretch;\n }\n\n .consult-wp-section .price-stack{\n display:flex;\n flex-direction:column;\n gap: 1.2rem;\n justify-content:center;\n }\n\n .consult-wp-section .price-card{\n position:relative;\n background:#fff;\n border-radius: 18px;\n padding: 1.7rem 1.8rem;\n box-shadow: 0 18px 40px -28px rgba(0,40,66,.35);\n border-left: 4px solid var(--c-rose);\n opacity:0; transform: translateX(-24px);\n transition: opacity .6s ease, transform .6s ease, box-shadow .35s ease;\n will-change: transform;\n overflow:hidden;\n }\n .consult-wp-section .price-card::before{\n content:\"\";\n position:absolute; inset:0;\n background: linear-gradient(120deg, transparent 30%, rgba(210,167,80,.16) 50%, transparent 70%);\n transform: translateX(-120%);\n transition: transform .7s ease;\n }\n .consult-wp-section .price-card:hover::before{ transform: translateX(120%); }\n .consult-wp-section .price-card:hover{ box-shadow: 0 26px 50px -26px rgba(0,40,66,.45); }\n .consult-wp-section .price-card.is-visible{ opacity:1; transform:none; }\n .consult-wp-section .price-card:nth-child(2){ border-left-color: var(--c-blue); transition-delay:.14s; }\n\n .consult-wp-section .price-card__label{\n display:flex;\n align-items:center;\n gap:.55rem;\n font-size:.95rem;\n font-weight:500;\n color:#5c6b78;\n margin-bottom:.6rem;\n }\n .consult-wp-section .price-card__label svg{ width:18px; height:18px; flex:none; }\n\n .consult-wp-section .price-card__amount{\n font-family: var(--font-display);\n font-weight:600;\n font-size: 2.15rem;\n color: var(--c-navy);\n display:flex;\n align-items:baseline;\n gap:.4rem;\n }\n .consult-wp-section .price-card__amount .prefix{\n font-family: var(--font-body);\n font-weight:500;\n font-size:1rem;\n color:#8a97a3;\n }\n\n .consult-wp-section .info-card{\n position:relative;\n background:#fff;\n border-radius: 22px;\n padding: 2.6rem 2.4rem 2.4rem;\n box-shadow: 0 24px 55px -30px rgba(0,40,66,.4);\n opacity:0; transform: translateY(24px);\n transition: opacity .8s ease .12s, transform .8s ease .12s;\n }\n .consult-wp-section .info-card.is-visible{ opacity:1; transform:none; }\n\n .consult-wp-section .image-ring{\n position:absolute;\n top: -52px;\n right: 6px;\n width: 174px;\n height: 174px;\n pointer-events:none;\n }\n .consult-wp-section .image-ring svg{\n width:100%; height:100%;\n animation: ringSpinWP 22s linear infinite;\n }\n @keyframes ringSpinWP{ to{ transform: rotate(360deg); } }\n\n .consult-wp-section .info-card__image{\n position:absolute;\n top: -34px;\n right: 24px;\n width: 150px;\n height: 150px;\n object-fit: cover;\n border-radius: \n border: 4px solid #fff;\n animation: imgFloatWP 5s ease-in-out infinite;\n }\n @keyframes imgFloatWP{\n 0%,100%{ transform: rotate(4deg) translateY(0); }\n 50%{ transform: rotate(2deg) translateY(-8px); }\n }\n\n .consult-wp-section .info-card h3{\n font-family: var(--font-display);\n font-weight:500;\n font-size: 1.4rem;\n color: var(--c-navy);\n max-width: 58%;\n margin-bottom: 1.6rem;\n }\n\n .consult-wp-section .checklist{ list-style:none; padding:0; margin:0;}\n .consult-wp-section .check-item{\n display:flex;\n align-items:center;\n gap:.9rem;\n padding: .85rem 0;\n border-bottom: 1px solid #f0e6e2;\n font-size: 1rem;\n color: #33414c;\n opacity:0; transform: translateX(-14px) scale(.98);\n transition: opacity .5s cubic-bezier(.34,1.56,.64,1), transform .5s cubic-bezier(.34,1.56,.64,1);\n }\n .consult-wp-section .check-item:last-child{ border-bottom:none; }\n .consult-wp-section .info-card.is-visible .check-item{ opacity:1; transform:none; }\n .consult-wp-section .info-card.is-visible .check-item:nth-child(1){ transition-delay:.2s; }\n .consult-wp-section .info-card.is-visible .check-item:nth-child(2){ transition-delay:.3s; }\n .consult-wp-section .info-card.is-visible .check-item:nth-child(3){ transition-delay:.4s; }\n .consult-wp-section .info-card.is-visible .check-item:nth-child(4){ transition-delay:.5s; }\n .consult-wp-section .info-card.is-visible .check-item:nth-child(5){ transition-delay:.6s; }\n\n .consult-wp-section .check-item__icon{\n flex:none;\n width: 34px; height:34px;\n border-radius: 10px;\n background: #fdf1ed;\n display:flex; align-items:center; justify-content:center;\n transition: transform .3s ease, background .3s ease;\n }\n .consult-wp-section .check-item:hover .check-item__icon{\n transform: rotate(-8deg) scale(1.1);\n background: var(--c-rose);\n }\n .consult-wp-section .check-item__icon svg{ width:20px; height:20px; transition: stroke .3s; }\n .consult-wp-section .check-item:hover .check-item__icon svg{ stroke: #fff; }\n\n .consult-wp-section .cta-wrap{\n margin-top: 2.6rem;\n text-align:center;\n }\n .consult-wp-section .btn-primary{\n position:relative;\n font-family: var(--font-body);\n font-weight:600;\n font-size:1.02rem;\n color: #fff !important;\n text-decoration: none !important;\n background: linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold-deep) 100%);\n background-size: 180% 180%;\n border: none;\n padding: 1.1rem 2.6rem;\n border-radius: 999px;\n cursor:pointer;\n display:inline-flex;\n align-items:center;\n gap:.65rem;\n overflow:hidden;\n box-shadow: 0 18px 36px -16px rgba(179,126,52,.65);\n transition: transform .3s ease, box-shadow .3s ease, background-position .6s ease;\n animation: btnGradientWP 6s ease-in-out infinite;\n }\n @keyframes btnGradientWP{\n 0%,100%{ background-position: 0% 50%; }\n 50%{ background-position: 100% 50%; }\n }\n .consult-wp-section .btn-primary::after{\n content:\"\";\n position:absolute;\n top:0; left:-60%;\n width:40%; height:100%;\n background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);\n transform: skewX(-20deg);\n animation: shineWP 3.2s ease-in-out infinite;\n }\n @keyframes shineWP{ 0%{ left:-60%; } 45%{ left:130%; } 100%{ left:130%; } }\n .consult-wp-section .btn-primary svg{ width:19px; height:19px; position:relative; z-index:1; transition: transform .3s ease; }\n .consult-wp-section .btn-primary span{ position:relative; z-index:1; }\n .consult-wp-section .btn-primary:hover{ transform: translateY(-4px); box-shadow: 0 26px 46px -18px rgba(179,126,52,.75); }\n .consult-wp-section .btn-primary:hover svg{ transform: translateX(4px); }\n\n .consult-wp-section .cta-ring{\n position:absolute;\n inset:-6px;\n border-radius:999px;\n border:1.5px solid var(--c-gold);\n animation: pulseRingWP 2.6s cubic-bezier(.4,0,.6,1) infinite;\n pointer-events:none;\n }\n @keyframes pulseRingWP{ 0%{ transform:scale(1); opacity:.6; } 80%{ transform:scale(1.14); opacity:0; } 100%{ transform:scale(1.14); opacity:0; } }\n .consult-wp-section .cta-inner{ position:relative; display:inline-block; }\n\n @media (max-width: 880px){\n .consult-wp-section .content-grid{ grid-template-columns: 1fr; }\n .consult-wp-section .info-card__image, .consult-wp-section .image-ring{ width:110px; height:110px; top:-26px; right:16px; }\n .consult-wp-section .info-card h3{ max-width:68%; }\n }\n\n @media (max-width: 520px){\n .consult-wp-section { padding-top: 3.5rem; padding-bottom: 3.5rem; }\n .consult-wp-section .info-card{ padding: 2.2rem 1.5rem 2rem; }\n .consult-wp-section .info-card__image{ position:static; margin-bottom:1.2rem; animation:none; transform:none; width:100%; height:150px; }\n .consult-wp-section .image-ring{ display:none; }\n .consult-wp-section .info-card h3{ max-width:100%; }\n }\n\n @media (prefers-reduced-motion: reduce){\n .consult-wp-section *{ animation:none !important; transition:none !important; }\n }\n <\/style>\n\n <div class=\"mesh\"><span><\/span><span><\/span><span><\/span><\/div>\n <div class=\"grain\"><\/div>\n\n <svg class=\"flower-particle\" style=\"left: 10%; width: 18px; height: 18px; animation-duration: 8s; animation-delay: 0s;\" viewBox=\"0 0 24 24\"><path d=\"M12,2C12,2 4,8 4,14C4,18.4 7.6,22 12,22C16.4,22 20,18.4 20,14C20,8 12,2 12,2Z\"\/><\/svg>\n <svg class=\"flower-particle\" style=\"left: 25%; width: 22px; height: 22px; animation-duration: 11s; animation-delay: 3s; fill: #f8c1b9;\" viewBox=\"0 0 24 24\"><path d=\"M12,2A3,3 0 0,1 15,5A3,3 0 0,1 12,8A3,3 0 0,1 9,5A3,3 0 0,1 12,2M12,16A3,3 0 0,1 15,19A3,3 0 0,1 12,22A3,3 0 0,1 9,19A3,3 0 0,1 12,16M19,9A3,3 0 0,1 22,12A3,3 0 0,1 19,15A3,3 0 0,1 16,12A3,3 0 0,1 19,9M5,9A3,3 0 0,1 8,12A3,3 0 0,1 5,15A3,3 0 0,1 2,12A3,3 0 0,1 5,9Z\"\/><\/svg>\n <svg class=\"flower-particle\" style=\"left: 60%; width: 14px; height: 14px; animation-duration: 9s; animation-delay: 1.5s;\" viewBox=\"0 0 24 24\"><path d=\"M12,2C12,2 4,8 4,14C4,18.4 7.6,22 12,22C16.4,22 20,18.4 20,14C20,8 12,2 12,2Z\"\/><\/svg>\n <svg class=\"flower-particle\" style=\"left: 85%; width: 20px; height: 20px; animation-duration: 13s; animation-delay: 5s; fill: #efc3b9;\" viewBox=\"0 0 24 24\"><path d=\"M12,2C12,2 4,8 4,14C4,18.4 7.6,22 12,22C16.4,22 20,18.4 20,14C20,8 12,2 12,2Z\"\/><\/svg>\n\n <div class=\"wrap\">\n <div class=\"head-block\" id=\"wp-head-block\">\n <span class=\"eyebrow\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#b37e34\" stroke-width=\"2\"><path d=\"M12 2v4M12 18v4M2 12h4M18 12h4M5 5l2.8 2.8M16.2 16.2 19 19M19 5l-2.8 2.8M7.8 16.2 5 19\"\/><\/svg>\n Consulta\n <\/span>\n <h2>Tu valoraci\u00f3n es el <em>primer paso<\/em><\/h2>\n <p>Antes de hablar de tratamientos, lo m\u00e1s importante es conocer tu estado de salud y entender cu\u00e1les son tus objetivos<\/p>\n <\/div>\n\n <div class=\"content-grid\">\n <div class=\"price-stack\">\n <div class=\"price-card\" id=\"wp-card-1\">\n <div class=\"price-card__label\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#b37e34\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"8\" r=\"3.4\"\/>\n <path d=\"M5 20c0-3.9 3.13-7 7-7s7 3.1 7 7\"\/>\n <\/svg>\n Consulta presencial\n <\/div>\n <div class=\"price-card__amount\">\n <span class=\"prefix\">Consulta en<\/span> \n <span class=\"count\" data-target=\"1000\">$0<\/span>\n <\/div>\n <\/div>\n\n <div class=\"price-card\" id=\"wp-card-2\">\n <div class=\"price-card__label\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#245080\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"2.5\" y=\"6\" width=\"13\" height=\"12\" rx=\"2.4\"\/>\n <path d=\"M15.5 10.2 21 7.5v9l-5.5-2.7\"\/>\n <\/svg>\n Consulta por videollamada\n <\/div>\n <div class=\"price-card__amount\">\n <span class=\"count\" data-target=\"800\">$0<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"info-card\" id=\"wp-info-card\">\n <div class=\"image-ring\">\n <svg viewBox=\"0 0 174 174\">\n <circle cx=\"87\" cy=\"87\" r=\"82\" fill=\"none\" stroke=\"#d2a750\" stroke-width=\"1.4\" stroke-dasharray=\"3 9\" opacity=\".55\"\/>\n <\/svg>\n <\/div>\n <img decoding=\"async\" class=\"info-card__image\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/img-hero-23.webp\" alt=\"Nutrici\u00f3n y alimentaci\u00f3n saludable\">\n <h3>En tu consulta recibir\u00e1s:<\/h3>\n <ul class=\"checklist\">\n \n <li class=\"check-item\">\n <span class=\"check-item__icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#b37e34\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"\/>\n <polyline points=\"14 2 14 8 20 8\"\/>\n <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"\/>\n <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"\/>\n <polyline points=\"10 9 9 9 8 9\"\/>\n <\/svg>\n <\/span>\n Historia cl\u00ednica completa\n <\/li>\n \n <li class=\"check-item\">\n <span class=\"check-item__icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#b37e34\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M12 2C8.5 2 6 6.5 6 12c0 4.5 2.5 8 6 8s6-3.5 6-8c0-5.5-2.5-12-6-12z\"\/>\n <circle cx=\"12\" cy=\"14\" r=\"3\" fill=\"none\"\/>\n <\/svg>\n <\/span>\n Evaluaci\u00f3n m\u00e9dica personalizada\n <\/li>\n \n <li class=\"check-item\">\n <span class=\"check-item__icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#b37e34\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2\"\/>\n <rect x=\"8\" y=\"2\" width=\"8\" height=\"4\" rx=\"1\" ry=\"1\"\/>\n <circle cx=\"12\" cy=\"13\" r=\"3\"\/>\n <line x1=\"14.1\" y1=\"15.1\" x2=\"17\" y2=\"18\"\/>\n <\/svg>\n <\/span>\n Revisi\u00f3n de estudios previos (si cuentas con ellos)\n <\/li>\n \n <li class=\"check-item\">\n <span class=\"check-item__icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#b37e34\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M12 5c.5-1.5 2-2.5 3.5-2.5.5 0 1 0 1 .5s-.5 1.5-2 2.5c-1 .5-2 .5-2.5-.5z\"\/>\n <path d=\"M12 6c-1.5-1.5-3.5-1.5-5 0A6 6 0 0 0 12 18a6 6 0 0 0 5-12c-1.5-1.5-3.5-1.5-5 0z\"\/>\n <\/svg>\n <\/span>\n Explicaci\u00f3n clara de las alternativas disponibles\n <\/li>\n \n <li class=\"check-item\">\n <span class=\"check-item__icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#b37e34\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"12\" r=\"9\"\/>\n <polyline points=\"12 6 12 12 16 14\"\/>\n <path d=\"M8 12h8\"\/>\n <\/svg>\n <\/span>\n Plan de tratamiento de acuerdo con tus necesidades\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n <div class=\"cta-wrap\">\n <span class=\"cta-inner\">\n <span class=\"cta-ring\"><\/span>\n <a class=\"btn-primary\" href=\"https:\/\/wa.link\/zvs595\" target=\"_blank\" rel=\"noopener noreferrer\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"2\"\/><path d=\"M3 10h18M8 3v4M16 3v4\"\/>\n <\/svg>\n <span>Programar mi cita<\/span>\n <\/a>\n <\/span>\n <\/div>\n <\/div>\n\n <script>\n (function() {\n \/\/ Reveal animations\n const wpTargets = document.querySelectorAll('#wp-head-block, #wp-card-1, #wp-card-2, #wp-info-card');\n if (wpTargets.length > 0) {\n const wpIo = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting){\n entry.target.classList.add('is-visible');\n wpIo.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1 });\n wpTargets.forEach(el => wpIo.observe(el));\n }\n\n \/\/ Count up animations\n const wpCounters = document.querySelectorAll('.consult-wp-section .count');\n if (wpCounters.length > 0) {\n const wpCounterIO = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting){\n const el = entry.target;\n const target = parseInt(el.dataset.target, 10);\n const duration = 1200;\n const start = performance.now();\n \n function tick(now){\n const p = Math.min((now - start) \/ duration, 1);\n const eased = 1 - Math.pow(1 - p, 3);\n const val = Math.round(eased * target);\n el.textContent = '$' + val.toLocaleString('en-US') + ' MXN';\n if (p < 1) requestAnimationFrame(tick);\n }\n requestAnimationFrame(tick);\n wpCounterIO.unobserve(el);\n }\n });\n }, { threshold: 0.2 });\n wpCounters.forEach(el => wpCounterIO.observe(el));\n }\n\n \/\/ 3D Tilt effect\n document.querySelectorAll('.consult-wp-section .price-card').forEach(card => {\n card.addEventListener('mousemove', (e) => {\n const r = card.getBoundingClientRect();\n const x = (e.clientX - r.left) \/ r.width - 0.5;\n const y = (e.clientY - r.top) \/ r.height - 0.5;\n card.style.transform = `perspective(600px) rotateX(${(-y*6).toFixed(2)}deg) rotateY(${(x*6).toFixed(2)}deg) translateY(-4px)`;\n });\n card.addEventListener('mouseleave', () => { card.style.transform = ''; });\n });\n })();\n <\/script>\n\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-512a7c0 e-con-full e-flex e-con e-parent\" data-id=\"512a7c0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1d910be elementor-widget elementor-widget-html\" data-id=\"1d910be\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Literata:ital,opsz,wght@0,7..72,400;0,7..72,500;0,7..72,600;0,7..72,700;1,7..72,400&family=Lexend:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n\n<section class=\"pro-help-section\" id=\"wp-help-section\">\n \n <div class=\"help-bg-shapes\" aria-hidden=\"true\">\n <span class=\"help-blob help-blob-1\"><\/span>\n <span class=\"help-blob help-blob-2\"><\/span>\n <span class=\"help-blob help-blob-3\"><\/span>\n <\/div>\n\n <div class=\"help-container\">\n \n <div class=\"help-header\" data-help-reveal>\n <h2>\u00bfC\u00f3mo podemos ayudarte?<\/h2>\n <div class=\"help-divider\"><\/div>\n <\/div>\n\n \n <div class=\"help-split-layout\">\n \n \n <div class=\"help-left-visual\" data-help-reveal style=\"--d:0.1s;\">\n <div class=\"visual-sticky-wrapper\">\n \n \n <div class=\"visual-item active\" data-visual=\"1\">\n <div class=\"visual-content-placeholder\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/8681.webp\" alt=\"Control de peso\" \/>\n <\/div>\n <\/div>\n\n \n <div class=\"visual-item\" data-visual=\"2\">\n <div class=\"visual-content-placeholder\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/Nutricio\u0301n-para-bajar-de-peso-1.webp\" alt=\"Nutrici\u00f3n para bajar de peso\" \/>\n <\/div>\n <\/div>\n\n \n <div class=\"visual-item\" data-visual=\"3\">\n <div class=\"visual-content-placeholder\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/Tratamientos-me\u0301dicos.webp\" alt=\"Tratamientos m\u00e9dicos para sobrepeso\" \/>\n <\/div>\n <\/div>\n\n \n <div class=\"visual-item\" data-visual=\"4\">\n <div class=\"visual-content-placeholder\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/Procedimientos-baria\u0301tricos.webp\" alt=\"Procedimientos bari\u00e1tricos\" \/>\n <\/div>\n <\/div>\n\n \n <div class=\"visual-item\" data-visual=\"5\">\n <div class=\"visual-content-placeholder\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1505751172876-fa1923c5c528?auto=format&fit=crop&w=800&q=80\" alt=\"Enfermedades asociadas\" \/>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n\n \n <div class=\"help-right-list\">\n \n \n <div class=\"help-list-item active\" data-target=\"1\" data-help-reveal style=\"--d:0.1s;\">\n <div class=\"item-body\">\n <h3>Control de peso<\/h3>\n <p>Recibe un plan m\u00e9dico personalizado para ayudarte a alcanzar y mantener un peso saludable<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"help-list-item\" data-target=\"2\" data-help-reveal style=\"--d:0.18s;\">\n <div class=\"item-body\">\n <h3>Nutrici\u00f3n para bajar de peso<\/h3>\n <p>Aprende a mejorar tus h\u00e1bitos alimenticios con el acompa\u00f1amiento de profesionales<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"help-list-item\" data-target=\"3\" data-help-reveal style=\"--d:0.26s;\">\n <div class=\"item-body\">\n <h3>Tratamientos m\u00e9dicos para sobrepeso y obesidad<\/h3>\n <p>Conoce las alternativas disponibles para controlar el sobrepeso y las enfermedades relacionadas<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"help-list-item\" data-target=\"4\" data-help-reveal style=\"--d:0.34s;\">\n <div class=\"item-body\">\n <h3>Procedimientos bari\u00e1tricos<\/h3>\n <p>Cuando existe una indicaci\u00f3n m\u00e9dica, contamos con opciones quir\u00fargicas como parte de un tratamiento integral<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"help-list-item\" data-target=\"5\" data-help-reveal style=\"--d:0.42s;\">\n <div class=\"item-body\">\n <h3>Enfermedades asociadas<\/h3>\n <p>Atenci\u00f3n para pacientes con diabetes, hipertensi\u00f3n, apnea del sue\u00f1o, h\u00edgado graso y otros padecimientos relacionados con la obesidad<\/p>\n <\/div>\n <\/div>\n\n <\/div>\n\n <\/div>\n <\/div>\n<\/section>\n\n<script>\n (function() {\n function initInteractiveSection() {\n const section = document.getElementById(\"wp-help-section\");\n if (!section) return;\n\n \/\/ Activar visualizaci\u00f3n segura de los efectos de scroll\n section.classList.add(\"js-ready\");\n\n \/\/ Intersection Observer para animaciones elegantes\n const revealTargets = section.querySelectorAll(\"[data-help-reveal]\");\n if (\"IntersectionObserver\" in window) {\n const io = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add(\"is-visible\");\n io.unobserve(entry.target);\n }\n });\n }, { threshold: 0.05, rootMargin: \"0px 0px -50px 0px\" });\n revealTargets.forEach(el => io.observe(el));\n } else {\n revealTargets.forEach(el => el.classList.add(\"is-visible\"));\n }\n\n \/\/ Cambios interactivos al hacer Hover o Click\n const listItems = section.querySelectorAll('.help-list-item');\n const visualItems = section.querySelectorAll('.visual-item');\n\n listItems.forEach(item => {\n const activateItem = () => {\n const targetId = item.getAttribute('data-target');\n\n listItems.forEach(li => li.classList.remove('active'));\n visualItems.forEach(vi => vi.classList.remove('active'));\n\n item.classList.add('active');\n const matchedVisual = section.querySelector(`.visual-item[data-visual=\"${targetId}\"]`);\n if (matchedVisual) {\n matchedVisual.classList.add('active');\n }\n };\n\n item.addEventListener('mouseenter', activateItem);\n item.addEventListener('click', activateItem);\n });\n }\n\n if (document.readyState === \"loading\") {\n document.addEventListener(\"DOMContentLoaded\", initInteractiveSection);\n } else {\n initInteractiveSection();\n }\n })();\n<\/script>\n\n<style>\n \/* Variables y Estilos Base *\/\n .pro-help-section {\n --wp-c-brand-light: #f3d8d1;\n --wp-c-brand-med: #e8afa7;\n --wp-wp-c-navy: #002842;\n --wp-c-gold: #d2a750;\n --wp-c-gold-dark: #b37e34;\n --wp-c-blue: #245080;\n --wp-c-text-muted: #4e5d78; \/* Un poco m\u00e1s oscuro para mejor contraste en el fondo nuevo *\/\n \n width: 100% !important;\n padding: 120px 24px !important;\n \n \/* NUEVO: Imagen de fondo integrada con overlay degradado *\/\n background-image: \n linear-gradient(135deg, rgba(253, 252, 251, 0.92) 0%, rgba(251, 238, 233, 0.88) 100%), \n url(\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/12.webp\") !important;\n background-size: cover !important;\n background-position: center !important;\n background-attachment: fixed !important; \/* Efecto paralaje sutil *\/\n \n position: relative !important;\n overflow: hidden !important;\n font-family: 'Lexend', sans-serif !important;\n box-sizing: border-box !important;\n }\n\n .pro-help-section * {\n box-sizing: border-box !important;\n }\n\n \/* FORMAS DE FONDO DECORATIVAS (Atenuadas para no saturar con la nueva imagen) *\/\n .help-bg-shapes {\n position: absolute !important;\n inset: 0 !important;\n pointer-events: none !important;\n z-index: 1 !important;\n }\n .help-blob {\n position: absolute !important;\n border-radius: 50% !important;\n filter: blur(100px) !important;\n opacity: 0.15 !important; \/* Reducido para suavidad *\/\n animation: helpBlobFloat 16s ease-in-out infinite;\n }\n .help-blob-1 { width: 400px; height: 400px; top: -100px; left: -100px; background: var(--wp-c-brand-light); }\n .help-blob-2 { width: 350px; height: 350px; bottom: -100px; right: -50px; background: var(--wp-c-brand-med); animation-delay: 4s; }\n .help-blob-3 { width: 250px; height: 250px; top: 40%; left: 30%; background: rgba(36, 80, 128, 0.1); animation-delay: 8s; }\n\n @keyframes helpBlobFloat {\n 0%, 100% { transform: translate(0, 0) scale(1); }\n 50% { transform: translate(20px, -20px) scale(1.03); }\n }\n\n .help-container {\n width: 100% !important;\n max-width: 1200px !important;\n margin: 0 auto !important;\n position: relative !important;\n z-index: 3 !important;\n }\n\n \/* REVELADO MEJORADO *\/\n [data-help-reveal] {\n opacity: 1;\n transform: none;\n transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0s), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0s) !important;\n }\n\n .pro-help-section.js-ready [data-help-reveal] {\n opacity: 0 !important;\n transform: translateY(30px) !important;\n }\n\n .pro-help-section.js-ready [data-help-reveal].is-visible {\n opacity: 1 !important;\n transform: translateY(0) !important;\n }\n\n \/* ENCABEZADO *\/\n .help-header {\n text-align: center !important;\n margin-bottom: 70px !important;\n }\n .help-header h2 {\n font-family: 'Literata', serif !important;\n font-size: clamp(2.2rem, 4.5vw, 2.9rem) !important;\n color: var(--wp-wp-c-navy) !important;\n font-weight: 600 !important;\n margin: 0 0 18px 0 !important;\n text-shadow: 0 2px 10px rgba(0,0,0,0.02);\n }\n .help-divider {\n width: 80px;\n height: 4px;\n background: linear-gradient(90deg, var(--wp-c-gold-dark), var(--wp-c-gold));\n margin: 0 auto;\n border-radius: 2px;\n }\n\n \/* SPLIT LAYOUT *\/\n .help-split-layout {\n display: grid !important;\n grid-template-columns: 1.15fr 1fr !important;\n gap: 60px !important;\n align-items: start !important;\n }\n\n \/* SECCI\u00d3N IZQUIERDA: VISUAL STICKY CON EFECTO VIDRIO *\/\n .help-left-visual {\n position: sticky !important;\n top: 10% !important;\n height: 520px !important;\n border-radius: 28px !important;\n background: rgba(255, 255, 255, 0.75) !important; \/* Semi-transparente *\/\n backdrop-filter: blur(8px) !important; \/* Cristal templado *\/\n -webkit-backdrop-filter: blur(8px) !important;\n box-shadow: 0 30px 60px rgba(0, 40, 66, 0.12) !important;\n border: 1px solid rgba(255, 255, 255, 0.6) !important;\n overflow: hidden !important;\n align-self: start !important;\n }\n\n .visual-sticky-wrapper {\n position: relative !important;\n width: 100% !important;\n height: 100% !important;\n }\n\n \/* Items Visuales *\/\n .visual-item {\n position: absolute !important;\n inset: 0 !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n opacity: 0 !important;\n transform: scale(0.95) !important;\n transition: opacity 0.5s ease-in-out, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;\n pointer-events: none !important;\n z-index: 1 !important;\n }\n\n .visual-item.active {\n opacity: 1 !important;\n transform: scale(1) !important;\n pointer-events: auto !important;\n z-index: 2 !important;\n }\n\n .visual-content-placeholder {\n width: 100% !important;\n height: 100% !important;\n position: relative !important;\n overflow: hidden !important;\n }\n\n .visual-content-placeholder img {\n width: 100% !important;\n height: 100% !important;\n object-fit: cover !important;\n object-position: center !important;\n transition: transform 1.2s ease !important;\n }\n\n .visual-item.active img {\n transform: scale(1.04) !important;\n }\n\n \/* SECCI\u00d3N DERECHA: LISTADO *\/\n .help-right-list {\n display: flex !important;\n flex-direction: column !important;\n gap: 16px !important;\n }\n\n \/* NUEVO: Tarjetas con efecto Glassmorphic *\/\n .help-list-item {\n background: rgba(255, 255, 255, 0.45) !important;\n backdrop-filter: blur(8px) !important;\n -webkit-backdrop-filter: blur(8px) !important;\n border: 1px solid rgba(255, 255, 255, 0.5) !important;\n border-radius: 20px !important;\n padding: 24px 28px !important;\n display: flex !important;\n gap: 0px !important;\n cursor: pointer !important;\n transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;\n position: relative !important;\n }\n\n .help-list-item:hover,\n .help-list-item.active {\n background: rgba(255, 255, 255, 0.92) !important;\n border-color: rgba(232, 175, 167, 0.5) !important; \/* Toque de color rosa en el borde activo *\/\n box-shadow: 0 20px 40px rgba(0, 40, 66, 0.08) !important;\n }\n\n .help-list-item::after {\n content: \"\" !important;\n position: absolute !important;\n left: 0;\n top: 50%;\n transform: translateY(-50%) scaleY(0.3) !important;\n width: 4px !important;\n height: 60% !important;\n background: linear-gradient(to bottom, var(--wp-c-gold), var(--wp-c-blue)) !important;\n border-radius: 0 4px 4px 0 !important;\n opacity: 0 !important;\n transition: all 0.4s ease !important;\n }\n\n .help-list-item.active::after {\n opacity: 1 !important;\n transform: translateY(-50%) scaleY(1) !important;\n }\n\n .item-body {\n width: 100% !important;\n }\n\n .item-body h3 {\n font-family: 'Literata', serif !important;\n font-size: 1.3rem !important;\n color: var(--wp-wp-c-navy) !important;\n font-weight: 600 !important;\n margin: 0 0 8px 0 !important;\n line-height: 1.3 !important;\n }\n\n .item-body p {\n font-size: 0.98rem !important;\n color: var(--wp-c-text-muted) !important;\n line-height: 1.6 !important;\n margin: 0 !important;\n font-weight: 400 !important;\n max-height: 0;\n overflow: hidden;\n opacity: 0;\n transform: translateY(5px);\n transition: max-height 0.4s ease, opacity 0.4s ease, transform 0.4s ease !important;\n }\n\n .help-list-item.active .item-body p {\n max-height: 150px !important;\n opacity: 1 !important;\n transform: translateY(0) !important;\n margin-top: 6px !important;\n }\n\n \/* RESPONSIVIDAD (M\u00d3VIL \/ TABLET) *\/\n @media (max-width: 968px) {\n .pro-help-section {\n background-attachment: scroll !important; \/* Desactiva parallax en m\u00f3viles para mejorar rendimiento *\/\n }\n\n .help-split-layout {\n grid-template-columns: 1fr !important;\n gap: 40px !important;\n }\n\n .help-left-visual {\n position: relative !important;\n top: 0 !important;\n height: 320px !important;\n order: 1 !important;\n }\n\n .help-right-list {\n order: 2 !important;\n }\n\n .help-list-item {\n padding: 20px 22px !important;\n }\n\n .help-list-item::after {\n display: none !important;\n }\n }\n\n @media (max-width: 600px) {\n .pro-help-section {\n padding: 80px 16px !important;\n }\n .help-header {\n margin-bottom: 40px !important;\n }\n .help-left-visual {\n height: 250px !important;\n }\n }\n\n \/* ACCESIBILIDAD *\/\n @media (prefers-reduced-motion: reduce) {\n .help-blob, .visual-item, .help-list-item, [data-help-reveal] {\n animation: none !important;\n transition: none !important;\n }\n [data-help-reveal] {\n opacity: 1 !important;\n transform: none !important;\n }\n }\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e778aaa e-con-full e-flex e-con e-parent\" data-id=\"e778aaa\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a0ec4b5 elementor-widget elementor-widget-html\" data-id=\"a0ec4b5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"nb-appt\">\n\n<style>\n .nb-appt{\n --nb-blush: #f3d8d1;\n --nb-rose: #e8afa7;\n --nb-navy: #002842;\n --nb-gold: #d2a750;\n --nb-gold-deep: #b37e34;\n --nb-blue: #245080;\n --nb-font-display: 'Literata', serif;\n --nb-font-body: 'Lexend', sans-serif;\n\n position:relative;\n overflow:hidden;\n background: linear-gradient(120deg, #001b30 0%, var(--nb-navy) 45%, var(--nb-blue) 100%);\n font-family: var(--nb-font-body);\n box-sizing:border-box;\n border-radius: 0;\n }\n .nb-appt, .nb-appt *{ box-sizing:border-box; }\n\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Literata:ital,opsz,wght@0,7..72,400;0,7..72,500;0,7..72,600;1,7..72,500&family=Lexend:wght@300;400;500;600;700&display=swap');\n\n .nb-appt .nb-appt__glow{\n position:absolute; inset:0; z-index:0; pointer-events:none;\n background:\n radial-gradient(40% 65% at 18% 25%, rgba(210,167,80,.22), transparent 60%),\n radial-gradient(34% 55% at 92% 85%, rgba(232,175,167,.16), transparent 60%);\n animation: nb-appt-glow 14s ease-in-out infinite alternate;\n }\n @keyframes nb-appt-glow{\n 0%{ transform: translate(0,0) scale(1); }\n 100%{ transform: translate(3%,-4%) scale(1.08); }\n }\n\n .nb-appt__wrap{\n position:relative; z-index:1;\n max-width: 1240px;\n margin: 0 auto;\n display:flex;\n flex-wrap:wrap;\n align-items:stretch;\n justify-content: center;\n min-height: 460px;\n }\n\n \/* ---------- image side (IZQUIERDA) ---------- *\/\n .nb-appt__media{\n position:relative;\n flex: 1 1 420px;\n min-height: 320px;\n display:flex;\n align-items:flex-end;\n justify-content: flex-start; \n order:1; \n }\n .nb-appt__media img{\n width:100%;\n max-width: 440px;\n margin: 0; \n display:block;\n object-fit: contain;\n object-position: bottom left; \n filter: drop-shadow(0 20px 30px rgba(0,10,20,.4));\n opacity:0; transform: translateY(30px);\n transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1);\n }\n .nb-appt__media img.nb-visible{ opacity:1; transform:none; }\n\n \/* ---------- text side (DERECHA) ---------- *\/\n .nb-appt__content{\n flex: 1.4 1 480px;\n display:flex;\n align-items:center;\n justify-content: center; \n order:2;\n padding: 3.6rem 2rem;\n }\n .nb-appt__content-inner{\n width: 100%;\n max-width: 520px;\n opacity:0; transform: translateY(18px);\n transition: opacity .8s ease, transform .8s ease;\n }\n .nb-appt__content-inner.nb-visible{ opacity:1; transform:none; }\n\n .nb-appt__eyebrow{\n display:inline-flex; align-items:center; gap:.55rem;\n font-weight:600; font-size:.78rem; letter-spacing:.22em; text-transform:uppercase;\n color: rgba(243,216,209,.8);\n margin-bottom: 1.3rem;\n }\n .nb-appt__eyebrow i{\n width:6px; height:6px; border-radius:50%; background: var(--nb-gold); display:inline-block;\n animation: nb-appt-dot 2s ease-out infinite;\n }\n @keyframes nb-appt-dot{\n 0%{ box-shadow:0 0 0 0 rgba(210,167,80,.55); }\n 70%{ box-shadow:0 0 0 9px rgba(210,167,80,0); }\n 100%{ box-shadow:0 0 0 0 rgba(210,167,80,0); }\n }\n\n .nb-appt__content h2{\n font-family: var(--nb-font-display);\n font-weight:500;\n font-size: clamp(2.1rem, 4vw, 3.1rem);\n line-height:1.2;\n color:#fff;\n margin: 0; \n }\n\n .nb-appt__content h2:empty {\n display: none;\n }\n\n .nb-appt__desc {\n font-size: 1.05rem;\n line-height: 1.6;\n color: rgba(255, 255, 255, 0.85);\n margin: 0 0 2.2rem 0;\n font-weight: 300;\n }\n\n .nb-appt__btn{\n position:relative;\n display:inline-flex;\n align-items:center;\n gap: 0;\n background:#fff;\n color: var(--nb-navy);\n font-family: var(--nb-font-body);\n font-weight:600;\n font-size: 1rem;\n text-decoration:none !important;\n border-radius: 999px;\n padding: .5rem .5rem .5rem 1.6rem;\n box-shadow: 0 18px 36px -16px rgba(0,10,20,.5);\n transition: transform .3s ease, box-shadow .3s ease;\n }\n .nb-appt__btn:hover{\n transform: translateY(-3px);\n box-shadow: 0 24px 44px -16px rgba(0,10,20,.6);\n }\n .nb-appt__btn-icon{\n display:inline-flex; align-items:center; justify-content:center;\n width: 42px; height:42px;\n border-radius: 50%;\n background: linear-gradient(135deg, var(--nb-gold) 0%, var(--nb-gold-deep) 100%);\n color:#fff;\n margin-left: 1.1rem;\n transition: transform .35s ease, background .3s ease;\n }\n .nb-appt__btn:hover .nb-appt__btn-icon{\n transform: translateX(4px) rotate(0deg);\n background: var(--nb-navy);\n }\n .nb-appt__btn-icon svg{ width:18px; height:18px; }\n\n \/* ---------- decorative floating line-icons ---------- *\/\n .nb-appt__deco{\n position:absolute;\n z-index:1;\n opacity:.5;\n animation: nb-appt-float 7s ease-in-out infinite;\n pointer-events:none;\n }\n @keyframes nb-appt-float{\n 0%,100%{ transform: translateY(0) rotate(0deg); }\n 50%{ transform: translateY(-14px) rotate(6deg); }\n }\n\n \/* Ajustes espec\u00edficos para escritorio (Pantallas grandes) *\/\n @media (min-width: 881px){\n .nb-appt__media{\n margin-left: -60px; \/* Empuja la imagen visiblemente hacia el borde izquierdo *\/\n }\n }\n\n \/* Vista responsiva ultra optimizada (Celulares y Tablets) *\/\n @media (max-width: 880px){\n .nb-appt__wrap{ \n flex-direction: column; \n min-height: auto !important; \/* Quitamos cualquier altura m\u00ednima forzada *\/\n }\n \n \/* Evita que el contenedor de la imagen se estire verticalmente *\/\n .nb-appt__media{ \n order: 1; \n flex: 0 0 auto !important; \n min-height: auto !important;\n padding-top: 2rem;\n padding-bottom: 0;\n justify-content: center; \n }\n \n \/* Imagen m\u00e1s peque\u00f1a y compacta con difuminado suave en la base *\/\n .nb-appt__media img{ \n margin: 0 auto; \n object-position: bottom center; \n max-width: 210px; \/* Tama\u00f1o ideal en celular para reducir la altura *\/\n height: auto;\n -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);\n mask-image: linear-gradient(to bottom, black 70%, transparent 100%);\n }\n \n \/* Evita que el contenedor del texto se estire verticalmente y reduce espacios *\/\n .nb-appt__content{ \n order: 2; \n flex: 0 0 auto !important; \n padding: 1rem 1.5rem 2rem; \/* Padding reducido al m\u00ednimo *\/\n text-align: center; \n }\n .nb-appt__content-inner{ margin: 0 auto; }\n .nb-appt__eyebrow{ justify-content: center; }\n .nb-appt__btn { align-self: center; }\n .nb-appt__desc { \n font-size: 0.95rem; \n margin: 0 0 1.2rem 0; \/* Menos espacio entre texto y bot\u00f3n *\/\n }\n }\n\n @media (max-width: 520px){\n .nb-appt__content h2{ font-size:1.9rem; }\n .nb-appt__desc { font-size: 0.95rem; }\n }\n\n @media (prefers-reduced-motion: reduce){\n .nb-appt *{ animation:none !important; transition:none !important; }\n }\n<\/style>\n\n<div class=\"nb-appt__glow\"><\/div>\n\n\n<svg class=\"nb-appt__deco\" style=\"top:9%; left:4%; width:46px; height:46px; animation-delay:0s;\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#f3d8d1\" stroke-width=\"1.3\">\n <path d=\"M4 12a8 8 0 0 1 8-8c0 4.4-3.6 8-8 8Z\"\/><path d=\"M4 12c0-1 .3-2 .8-3\"\/>\n<\/svg>\n<svg class=\"nb-appt__deco\" style=\"top:14%; right:6%; width:40px; height:40px; animation-delay:1.6s;\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#d2a750\" stroke-width=\"1.3\">\n <path d=\"M4 15c0-5 4-9 9-9-.5 6-4.5 9-9 9Z\"\/>\n<\/svg>\n<svg class=\"nb-appt__deco\" style=\"bottom:12%; right:9%; width:38px; height:38px; animation-delay:3.2s;\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#e8afa7\" stroke-width=\"1.3\">\n <circle cx=\"9\" cy=\"15\" r=\"3\"\/><circle cx=\"15\" cy=\"16\" r=\"3\"\/><path d=\"M12 9v3M9 12l3-3 3 3\"\/>\n<\/svg>\n\n<div class=\"nb-appt__wrap\">\n\n \n <div class=\"nb-appt__media\">\n <img decoding=\"async\" data-nb-reveal src=\"https:\/\/static.vecteezy.com\/system\/resources\/thumbnails\/046\/319\/214\/small_2x\/smiling-nutritionist-holding-fresh-vegetables-and-clipboard-on-transparent-background-png.png\" alt=\"Nutricionista Satisfecha\">\n <\/div>\n\n \n <div class=\"nb-appt__content\">\n <div class=\"nb-appt__content-inner\" data-nb-reveal>\n <h2><\/h2>\n <p class=\"nb-appt__desc\">Despu\u00e9s de tu valoraci\u00f3n, te ayudaremos a identificar la alternativa que mejor se adapte a tus necesidades, objetivos y estado de salud<\/p>\n \n <a href=\"https:\/\/wa.link\/zvs595\" target=\"_blank\" class=\"nb-appt__btn\">\n <span>Conocer opciones<\/span>\n <span class=\"nb-appt__btn-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" class=\"help-btn-arrow\">\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/>\n <polyline points=\"13 6 19 12 13 18\"\/>\n <\/svg>\n <\/span>\n <\/a>\n <\/div>\n <\/div>\n\n<\/div>\n<\/div>\n\n<script>\n(function(){\n var els = document.querySelectorAll('.nb-appt [data-nb-reveal]');\n if (!('IntersectionObserver' in window)) {\n els.forEach(function(el){ el.classList.add('nb-visible'); });\n return;\n }\n var io = new IntersectionObserver(function(entries){\n entries.forEach(function(entry){\n if (entry.isIntersecting){\n entry.target.classList.add('nb-visible');\n io.unobserve(entry.target);\n }\n });\n }, { threshold: 0.15 });\n els.forEach(function(el){ io.observe(el); });\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9b290f5 e-con-full e-flex e-con e-parent\" data-id=\"9b290f5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f014003 elementor-widget elementor-widget-html\" data-id=\"f014003\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Literata:ital,opsz,wght@0,7..72,400;0,7..72,600;1,7..72,400&family=Lexend:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\">\n\n<section class=\"pro-team-section\" id=\"sobre-nosotros\">\n \n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/plato-comida.webp\" alt=\"Plato de comida saludable\" class=\"floating-food-plate\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/pesa.webp\" alt=\"B\u00e1scula de cocina\" class=\"floating-scale\">\n\n <div class=\"team-bg-icons\">\n <i class=\"fa-solid fa-leaf team-icon-b1\"><\/i>\n <i class=\"fa-solid fa-apple-whole team-icon-b2\"><\/i>\n <i class=\"fa-solid fa-dumbbell team-icon-b3\"><\/i>\n <i class=\"fa-solid fa-bottle-water team-icon-b4\"><\/i>\n <\/div>\n\n <div class=\"team-container\">\n \n \n <div class=\"team-header\">\n <span class=\"team-badge\">Sobre nosotros<\/span>\n <h2>Conoce al equipo de <span class=\"text-brand\">Se les acab\u00f3 su gordito<\/span>, Cl\u00ednica especialista en nutrici\u00f3n y bariatr\u00eda en la CDMX<\/h2>\n <div class=\"team-divider\"><\/div>\n <p class=\"team-lead\">Creemos que cada persona merece una atenci\u00f3n cercana, respetuosa y basada en evidencia m\u00e9dica<\/p>\n <p class=\"team-subtext\">Nuestro equipo est\u00e1 formado por especialistas comprometidos con brindar un acompa\u00f1amiento integral desde la primera consulta. Nos enfocamos en escucharte, resolver tus dudas y ayudarte a tomar decisiones informadas sobre tu salud<\/p>\n <\/div>\n\n \n <div class=\"team-slider-wrapper\">\n \n \n <button class=\"team-slider-arrow prev\" aria-label=\"Anterior\">❮<\/button>\n <button class=\"team-slider-arrow next\" aria-label=\"Siguiente\">❯<\/button>\n\n \n <div class=\"team-slider-track\">\n \n \n <div class=\"team-card active\">\n <div class=\"team-card-inner\">\n <div class=\"team-member-photo\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/IMG-20230227-WA0039.webp\" alt=\"Dr. Oscar S\u00e1nchez Moreno\">\n <span class=\"specialty-tag\">Bariatr\u00eda Endosc\u00f3pica<\/span>\n <\/div>\n <div class=\"team-member-info\">\n <h3>Dr. Oscar S\u00e1nchez Moreno<\/h3>\n <h4 class=\"member-role\">Especialista en Endoscopia Bari\u00e1trica y Cirug\u00eda Endosc\u00f3pica<\/h4>\n \n <div class=\"member-credentials\">\n <span><strong>C\u00e9dula Profesional:<\/strong> 5862996<\/span>\n <span><strong>C\u00e9dula de Especialidad:<\/strong> 09642967<\/span>\n <\/div>\n \n <p class=\"member-bio\">Se enfoca en procedimientos bari\u00e1tricos endosc\u00f3picos y t\u00e9cnicas de m\u00ednima invasi\u00f3n para el tratamiento del sobrepeso y la obesidad. Tambi\u00e9n brinda atenci\u00f3n a pacientes con complicaciones posteriores a cirug\u00eda bari\u00e1trica y participa en el manejo integral de la salud metab\u00f3lica<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"team-card\">\n <div class=\"team-card-inner\">\n <div class=\"team-member-photo\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2025\/12\/El-Gordito-1.webp\" alt=\"Dr. Rodrigo Rangel Vel\u00e1zquez\">\n <span class=\"specialty-tag\">Cirug\u00eda Bari\u00e1trica<\/span>\n <\/div>\n <div class=\"team-member-info\">\n <h3>Dr. Rodrigo Rangel Vel\u00e1zquez<\/h3>\n <h4 class=\"member-role\">M\u00e9dico Cirujano y Especialista Bariatra<\/h4>\n \n <div class=\"member-credentials\">\n <span><strong>C\u00e9dula Profesional:<\/strong> 7401327<\/span>\n <span><strong>C\u00e9dula de Especialidad:<\/strong> 11515384<\/span>\n <span><strong>Certificaci\u00f3n en Bariatr\u00eda:<\/strong> B19004319<\/span>\n <\/div>\n \n <p class=\"member-bio\">Brinda atenci\u00f3n integral para el tratamiento del sobrepeso y la obesidad mediante estrategias personalizadas que pueden incluir tratamiento cl\u00ednico, procedimientos bari\u00e1tricos y seguimiento continuo, con el objetivo de favorecer cambios sostenibles en la salud y el bienestar del paciente<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"team-card\">\n <div class=\"team-card-inner\">\n <div class=\"team-member-photo\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2025\/12\/El-Gordito-3.webp\" alt=\"Dra. Mar\u00eda Azucena L\u00f3pez Santill\u00e1n\">\n <span class=\"specialty-tag\">Medicina y Nutrici\u00f3n<\/span>\n <\/div>\n <div class=\"team-member-info\">\n <h3>Dra. Mar\u00eda Azucena L\u00f3pez Santill\u00e1n<\/h3>\n <h4 class=\"member-role\">Especialista en Medicina Familiar y Nutrici\u00f3n<\/h4>\n \n <div class=\"member-credentials\">\n <span><strong>C\u00e9dula Profesional:<\/strong> 09251690<\/span>\n <span><strong>C\u00e9dula de Especialidad:<\/strong> 11974797<\/span>\n <\/div>\n \n <p class=\"member-bio\">Acompa\u00f1a a los pacientes en el manejo del peso y la adopci\u00f3n de h\u00e1bitos saludables mediante planes de alimentaci\u00f3n personalizados, educaci\u00f3n nutricional y seguimiento m\u00e9dico, adaptando cada estrategia a sus necesidades y estilo de vida<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"team-card\">\n <div class=\"team-card-inner\">\n <div class=\"team-member-photo\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/Dra.-Daniela-Me\u0301ndez-Rodri\u0301guez.webp\" alt=\"Dra. Daniela M\u00e9ndez Rodr\u00edguez\">\n <span class=\"specialty-tag\">Psicolog\u00eda<\/span>\n <\/div>\n <div class=\"team-member-info\">\n <h3>Dra. Daniela M\u00e9ndez Rodr\u00edguez<\/h3>\n <h4 class=\"member-role\">Psic\u00f3loga<\/h4>\n \n <div class=\"member-credentials\">\n <span><strong>C\u00e9dula Profesional:<\/strong> 11520291<\/span>\n <\/div>\n \n <p class=\"member-bio\">Brinda acompa\u00f1amiento psicol\u00f3gico enfocado en el cambio de h\u00e1bitos, la relaci\u00f3n con la alimentaci\u00f3n, el manejo de la ansiedad y el fortalecimiento de la motivaci\u00f3n. Su intervenci\u00f3n forma parte del abordaje integral para favorecer cambios sostenibles en el bienestar y la calidad de vida<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n\n \n <div class=\"team-slider-dots\"><\/div>\n <\/div>\n\n <\/div>\n\n \n\n \n <div class=\"custom-shape-divider-bottom-1784060107\">\n <svg data-name=\"Layer 1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 1200 120\" preserveAspectRatio=\"none\">\n <path d=\"M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z\" class=\"shape-fill\"><\/path>\n <\/svg>\n <\/div>\n<\/section>\n\n\n<script>\n document.addEventListener(\"DOMContentLoaded\", function() {\n const track = document.querySelector(\".team-slider-track\");\n const cards = document.querySelectorAll(\".team-card\");\n const prevBtn = document.querySelector(\".team-slider-arrow.prev\");\n const nextBtn = document.querySelector(\".team-slider-arrow.next\");\n const dotsContainer = document.querySelector(\".team-slider-dots\");\n \n let currentIndex = 0;\n let slideInterval;\n const totalSlides = cards.length;\n\n \/\/ Generar puntos indicadores (Dots)\n cards.forEach((_, index) => {\n const dot = document.createElement(\"div\");\n dot.classList.add(\"team-dot\");\n if (index === 0) dot.classList.add(\"active\");\n dot.addEventListener(\"click\", () => goToSlide(index));\n dotsContainer.appendChild(dot);\n });\n\n const dots = document.querySelectorAll(\".team-dot\");\n\n function updateSlider() {\n cards.forEach((card, index) => {\n card.classList.remove(\"active\", \"prev-slide\", \"next-slide\");\n if (index === currentIndex) {\n card.classList.add(\"active\");\n } else if (index === (currentIndex - 1 + totalSlides) % totalSlides) {\n card.classList.add(\"prev-slide\");\n } else if (index === (currentIndex + 1) % totalSlides) {\n card.classList.add(\"next-slide\");\n }\n });\n\n dots.forEach((dot, index) => {\n dot.classList.toggle(\"active\", index === currentIndex);\n });\n \n \/\/ Efecto de traslaci\u00f3n responsivo en m\u00f3viles\n if(window.innerWidth <= 768) {\n track.style.transform = `translateX(-${currentIndex * 100}%)`;\n } else {\n track.style.transform = \"none\";\n }\n }\n\n function nextSlide() {\n currentIndex = (currentIndex + 1) % totalSlides;\n updateSlider();\n }\n\n function prevSlide() {\n currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;\n updateSlider();\n }\n\n function goToSlide(index) {\n currentIndex = index;\n updateSlider();\n resetAutoplay();\n }\n\n function startAutoplay() {\n slideInterval = setInterval(nextSlide, 6000); \/\/ Cambia cada 6 segundos\n }\n\n function resetAutoplay() {\n clearInterval(slideInterval);\n startAutoplay();\n }\n\n \/\/ Asignaci\u00f3n de eventos\n nextBtn.addEventListener(\"click\", () => { nextSlide(); resetAutoplay(); });\n prevBtn.addEventListener(\"click\", () => { prevSlide(); resetAutoplay(); });\n\n \/\/ Pausar con el mouse encima\n const wrapper = document.querySelector(\".team-slider-wrapper\");\n wrapper.addEventListener(\"mouseenter\", () => clearInterval(slideInterval));\n wrapper.addEventListener(\"mouseleave\", startAutoplay);\n\n \/\/ Soporte Swipe para m\u00f3viles\n let startX = 0;\n wrapper.addEventListener(\"touchstart\", e => startX = e.touches[0].clientX, {passive: true});\n wrapper.addEventListener(\"touchend\", e => {\n let diffX = startX - e.changedTouches[0].clientX;\n if (Math.abs(diffX) > 50) {\n if (diffX > 0) nextSlide(); else prevSlide();\n resetAutoplay();\n }\n }, {passive: true});\n\n \/\/ Inicializar\n startAutoplay();\n updateSlider();\n window.addEventListener(\"resize\", updateSlider);\n });\n<\/script>\n\n<style>\n \/* PALETA DE COLORES *\/\n .pro-team-section {\n --c-brand-light: #f3d8d1;\n --c-brand-med: #e8afa7;\n --c-navy: #002842;\n --c-gold: #d2a750;\n --c-gold-dark: #b37e34;\n --c-blue: #245080;\n --c-bg-clean: #FDFCFB;\n }\n\n \/* ESTILOS DE LA SECCI\u00d3N *\/\n .pro-team-section {\n width: 100% !important;\n padding: 50px 24px !important; \/* Mantenemos padding amplio para que no se encima la nueva onda *\/\n background: var(--c-bg-clean) !important;\n position: relative !important;\n overflow: hidden !important;\n font-family: 'Lexend', sans-serif !important;\n }\n\n \/* ESTILOS DE NUEVAS IM\u00c1GENES DECORATIVAS Y FLOTANTES *\/\n .floating-food-plate {\n position: absolute !important;\n top: 25% !important;\n right: -100px !important; \/* Sobresale parcialmente del lado derecho *\/\n width: 320px !important;\n height: auto !important;\n z-index: 2 !important; \/* Detr\u00e1s de las tarjetas de doctores pero encima del fondo *\/\n pointer-events: none !important;\n transform-origin: center !important;\n animation: spinSlow 35s linear infinite !important;\n opacity: 0.85 !important;\n transition: opacity 0.3s ease !important;\n }\n\n .floating-scale {\n position: absolute !important;\n bottom: 12% !important;\n left: -60px !important; \/* Se asoma del lado izquierdo *\/\n width: 200px !important;\n height: auto !important;\n z-index: 2 !important;\n pointer-events: none !important;\n opacity: 0.9 !important;\n animation: floatAndNudge 8s ease-in-out infinite !important;\n }\n\n \/* ANIMACIONES NUEVAS *\/\n @keyframes spinSlow {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n\n @keyframes floatAndNudge {\n 0%, 100% {\n transform: translateY(0) rotate(0deg);\n }\n 50% {\n transform: translateY(-15px) rotate(3deg) translateX(10px); \/* Flota y se asoma levemente hacia la derecha *\/\n }\n }\n\n \/* CONTENEDOR Y COLORES DEL DIVISOR VECTORIAL SUPERIOR *\/\n .team-wave-top {\n position: absolute !important;\n top: -1px !important;\n left: 0 !important;\n width: 100% !important;\n overflow: hidden !important;\n line-height: 0 !important;\n z-index: 4 !important;\n }\n .team-wave-top svg {\n position: relative !important;\n display: block !important;\n width: calc(100% + 1.3px) !important;\n height: 70px !important;\n }\n .wave-ext-white {\n fill: #ffffff !important;\n }\n .wave-line-dark {\n fill: var(--c-navy) !important;\n }\n\n \/* ESTILOS DEL CONECTOR FLOTANTE OBLIGATORIOS (OPCI\u00d3N 3) *\/\n .team-connector-badge {\n position: absolute !important;\n bottom: 85px !important; \/* Posicionado estrat\u00e9gicamente en la ca\u00edda de la onda *\/\n left: 50% !important;\n transform: translateX(-50%) !important;\n background: #ffffff !important;\n padding: 12px 28px !important;\n border-radius: 30px !important;\n box-shadow: 0 10px 30px rgba(0, 40, 66, 0.08) !important;\n border: 1px solid var(--c-brand-light) !important;\n z-index: 5 !important;\n display: flex !important;\n align-items: center !important;\n gap: 10px !important;\n white-space: nowrap !important;\n transition: all 0.3s ease !important;\n }\n\n .team-connector-badge span {\n font-size: 0.88rem !important;\n color: var(--c-navy) !important;\n font-weight: 500 !important;\n letter-spacing: 0.3px !important;\n }\n\n .team-connector-badge i {\n color: var(--c-gold) !important;\n font-size: 0.75rem !important;\n }\n\n \/* NUEVOS ESTILOS DEL DIVISOR INFERIOR PERSONALIZADO *\/\n .custom-shape-divider-bottom-1784060107 {\n position: absolute !important;\n bottom: 0 !important;\n left: 0 !important;\n width: 100% !important;\n overflow: hidden !important;\n line-height: 0 !important;\n z-index: 4 !important;\n }\n\n .custom-shape-divider-bottom-1784060107 svg {\n position: relative !important;\n display: block !important;\n width: calc(100% + 1.3px) !important;\n height: 110px !important;\n }\n\n .custom-shape-divider-bottom-1784060107 .shape-fill {\n fill: #FFFFFF !important;\n }\n\n \/* CAPA DE ICONOS EN SEGUNDO PLANO *\/\n .team-bg-icons {\n position: absolute !important;\n top: 0; left: 0; width: 100%; height: 100%;\n pointer-events: none !important;\n z-index: 1 !important;\n }\n \n .team-bg-icons i {\n position: absolute !important;\n color: var(--c-brand-med) !important;\n opacity: 0.12 !important;\n font-size: 3.5rem !important;\n animation: teamFloat 10s ease-in-out infinite;\n }\n \n .team-icon-b1 { top: 16%; left: 6%; animation-delay: 0s; }\n .team-icon-b2 { bottom: 18%; left: 8%; animation-delay: 2s; font-size: 4.5rem !important; }\n .team-icon-b3 { top: 22%; right: 7%; animation-delay: 1s; }\n .team-icon-b4 { bottom: 15%; right: 9%; animation-delay: 3s; }\n\n @keyframes teamFloat {\n 0%, 100% { transform: translateY(0) rotate(0deg); }\n 50% { transform: translateY(-12px) rotate(6deg); }\n }\n\n .team-container {\n width: 100% !important;\n max-width: 1200px !important;\n margin: 0 auto !important;\n position: relative !important;\n z-index: 3 !important;\n }\n\n \/* ENCABEZADO *\/\n .team-header {\n text-align: center !important;\n max-width: 850px !important;\n margin: 0 auto 60px !important;\n }\n\n .team-badge {\n display: inline-block !important;\n padding: 6px 18px !important;\n background: var(--c-brand-light) !important;\n color: var(--c-navy) !important;\n border: 1px solid var(--c-brand-med) !important;\n border-radius: 30px !important;\n font-size: 0.75rem !important;\n font-weight: 600 !important;\n letter-spacing: 2px !important;\n \n margin-bottom: 20px !important;\n }\n\n .team-header h2 {\n font-family: 'Literata', serif !important;\n font-size: clamp(1.85rem, 4vw, 2.6rem) !important;\n color: var(--c-navy) !important;\n line-height: 1.3 !important;\n font-weight: 600 !important;\n margin: 0 0 20px 0 !important;\n }\n\n .text-brand { color: var(--c-blue) !important; }\n\n .team-divider {\n width: 70px !important;\n height: 4px !important;\n background: var(--c-gold) !important;\n margin: 0 auto 25px !important;\n border-radius: 2px !important;\n }\n\n .team-lead {\n font-size: 1.25rem !important;\n font-weight: 500 !important;\n color: var(--c-navy) !important;\n line-height: 1.5 !important;\n margin-bottom: 15px !important;\n }\n\n .team-subtext {\n font-size: 1.05rem !important;\n font-weight: 300 !important;\n color: #4A5568 !important;\n line-height: 1.65 !important;\n }\n\n \/* CONTENEDOR DEL SLIDER *\/\n .team-slider-wrapper {\n position: relative !important;\n width: 100% !important;\n padding: 20px 0 !important;\n }\n\n .team-slider-track {\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n position: relative !important;\n min-height: 460px !important;\n width: 100% !important;\n }\n\n \/* TARJETAS DEL EQUIPO *\/\n .team-card {\n position: absolute !important;\n width: 100% !important;\n max-width: 850px !important;\n opacity: 0 !important;\n pointer-events: none !important;\n transform: scale(0.8) translateX(0) !important;\n z-index: 1 !important;\n transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;\n }\n\n .team-card.active {\n opacity: 1 !important;\n pointer-events: auto !important;\n transform: scale(1) translateX(0) !important;\n z-index: 10 !important;\n }\n\n .team-card.prev-slide {\n opacity: 0.4 !important;\n transform: scale(0.85) translateX(-25%) !important;\n z-index: 5 !important;\n }\n\n .team-card.next-slide {\n opacity: 0.4 !important;\n transform: scale(0.85) translateX(25%) !important;\n z-index: 5 !important;\n }\n\n .team-card-inner {\n background: #ffffff !important;\n border: 1px solid rgba(0, 40, 66, 0.08) !important;\n border-radius: 20px !important;\n box-shadow: 0 20px 40px rgba(0, 40, 66, 0.04) !important;\n display: grid !important;\n grid-template-columns: 280px 1fr !important;\n overflow: hidden !important;\n transition: box-shadow 0.3s ease !important;\n }\n\n .team-card.active:hover .team-card-inner {\n box-shadow: 0 30px 60px rgba(0, 40, 66, 0.1) !important;\n }\n\n \/* FOTO DE PERFIL *\/\n .team-member-photo {\n width: 100% !important;\n height: 100% !important;\n min-height: 340px !important;\n background: var(--c-brand-light) !important;\n position: relative !important;\n overflow: hidden !important;\n }\n\n .team-member-photo img {\n width: 100% !important;\n height: 100% !important;\n object-fit: cover !important;\n display: block !important;\n }\n\n .specialty-tag {\n position: absolute !important;\n bottom: 16px !important;\n left: 16px !important;\n background: var(--c-navy) !important;\n color: #ffffff !important;\n padding: 5px 14px !important;\n font-size: 0.75rem !important;\n font-weight: 500 !important;\n border-radius: 30px !important;\n box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;\n z-index: 5 !important;\n }\n\n \/* INFORMACI\u00d3N DEL DOCTOR *\/\n .team-member-info {\n padding: 40px !important;\n display: flex !important;\n flex-direction: column !important;\n justify-content: center !important;\n text-align: left !important;\n }\n\n .team-member-info h3 {\n font-family: 'Literata', serif !important;\n font-size: 1.6rem !important;\n color: var(--c-navy) !important;\n margin: 0 0 6px 0 !important;\n font-weight: 600 !important;\n }\n\n .member-role {\n font-size: 0.95rem !important;\n color: var(--c-gold-dark) !important;\n font-weight: 500 !important;\n margin: 0 0 16px 0 !important;\n line-height: 1.4 !important;\n }\n\n .member-credentials {\n display: flex !important;\n flex-direction: column !important;\n gap: 4px !important;\n padding: 10px 14px !important;\n background: rgba(243, 216, 209, 0.3) !important;\n border-left: 3px solid var(--c-brand-med) !important;\n margin-bottom: 20px !important;\n border-radius: 0 6px 6px 0 !important;\n }\n\n .member-credentials span {\n font-size: 0.8rem !important;\n color: var(--c-navy) !important;\n }\n\n .member-bio {\n font-size: 0.92rem !important;\n color: #4A5568 !important;\n line-height: 1.6 !important;\n margin: 0 !important;\n font-weight: 300 !important;\n }\n\n \/* BOTONES DE NAVEGACI\u00d3N (FLECHAS) *\/\n .team-slider-arrow {\n position: absolute !important;\n top: 50% !important;\n transform: translateY(-50%) !important;\n width: 50px !important;\n height: 50px !important;\n background: #ffffff !important;\n border: 2px solid var(--c-navy) !important;\n border-radius: 50px !important;\n color: var(--c-navy) !important;\n font-size: 1.1rem !important;\n cursor: pointer !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n z-index: 20 !important;\n box-shadow: 3px 3px 0px var(--c-navy) !important;\n transition: all 0.2s ease !important;\n }\n\n .team-slider-arrow:hover {\n background: var(--c-navy) !important;\n color: #ffffff !important;\n box-shadow: 0px 0px 0px var(--c-navy) !important;\n transform: translateY(-50%) translate(3px, 3px) !important;\n }\n\n .team-slider-arrow.prev { left: -10px !important; }\n .team-slider-arrow.next { right: -10px !important; }\n\n \/* INDICADORES DE PUNTOS (DOTS) *\/\n .team-slider-dots {\n display: flex !important;\n justify-content: center !important;\n gap: 12px !important;\n margin-top: 35px !important;\n }\n\n .team-dot {\n width: 10px !important;\n height: 10px !important;\n background: var(--c-brand-med) !important;\n border-radius: 50px !important;\n cursor: pointer !important;\n transition: all 0.3s ease !important;\n opacity: 0.6 !important;\n }\n\n .team-dot.active {\n width: 28px !important;\n background: var(--c-blue) !important;\n opacity: 1 !important;\n }\n\n \/* AJUSTES RESPONSIVOS *\/\n @media (max-width: 1200px) {\n .floating-food-plate {\n width: 250px !important;\n right: -80px !important;\n }\n .floating-scale {\n width: 160px !important;\n left: -40px !important;\n }\n }\n\n @media (max-width: 1024px) {\n .team-card.prev-slide,\n .team-card.next-slide {\n opacity: 0 !important;\n }\n .team-slider-arrow.prev { left: 10px !important; }\n .team-slider-arrow.next { right: 10px !important; }\n \n \/* Reducci\u00f3n sutil de elementos flotantes en resoluciones medianas *\/\n .floating-food-plate {\n width: 180px !important;\n right: -50px !important;\n opacity: 0.4 !important; \/* M\u00e1s transparente para que no interfiera *\/\n }\n .floating-scale {\n width: 120px !important;\n left: -30px !important;\n opacity: 0.4 !important;\n }\n }\n\n @media (max-width: 768px) {\n .pro-team-section { padding: 100px 16px !important; }\n .custom-shape-divider-bottom-1784060107 svg { height: 60px !important; } \/* Suavizado en m\u00f3viles *\/\n \n \/* En pantallas m\u00f3viles ocultamos para priorizar la usabilidad o las hacemos diminutas en las esquinas *\/\n .floating-food-plate {\n width: 110px !important;\n right: -30px !important;\n top: 15% !important;\n opacity: 0.3 !important;\n }\n .floating-scale {\n width: 80px !important;\n left: -20px !important;\n bottom: 5% !important;\n opacity: 0.3 !important;\n }\n\n \/* Ajuste del elemento conector flotante en m\u00f3viles *\/\n .team-connector-badge {\n bottom: 45px !important; \n padding: 8px 18px !important;\n max-width: 85%;\n }\n .team-connector-badge span {\n font-size: 0.78rem !important;\n }\n\n .team-slider-track {\n display: flex !important;\n justify-content: flex-start !important;\n align-items: stretch !important;\n min-height: auto !important;\n transition: transform 0.5s ease-in-out !important;\n position: relative !important;\n }\n\n .team-card {\n position: relative !important;\n flex-shrink: 0 !important;\n opacity: 1 !important;\n pointer-events: auto !important;\n transform: none !important;\n padding: 0 8px !important;\n }\n\n .team-card-inner {\n grid-template-columns: 1fr !important;\n border-radius: 16px !important;\n }\n\n .team-member-photo {\n min-height: 260px !important;\n height: 260px !important;\n }\n\n .team-member-info {\n padding: 24px !important;\n }\n\n .team-slider-arrow {\n display: none !important;\n }\n \n .team-slider-dots { margin-top: 24px !important; }\n }\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-cafafcf e-con-full e-flex e-con e-parent\" data-id=\"cafafcf\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c5d5289 elementor-widget elementor-widget-html\" data-id=\"c5d5289\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Literata:ital,opsz,wght@0,7..72,400;0,7..72,600;1,7..72,400&family=Lexend:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\">\n\n<section class=\"exclusive-gallery-section\">\n \n \n <div class=\"bg-gallery-icons\">\n <i class=\"fa-solid fa-apple-whole gall-pattern-icon icon-g1\" title=\"Nutrici\u00f3n \/ Manzana\"><\/i>\n <i class=\"fa-solid fa-carrot gall-pattern-icon icon-g2\" title=\"Alimentaci\u00f3n \/ Verduras\"><\/i>\n <i class=\"fa-solid fa-bottle-water gall-pattern-icon icon-g3\" title=\"Hidrataci\u00f3n \/ Agua\"><\/i>\n <i class=\"fa-solid fa-dumbbell gall-pattern-icon icon-g4\" title=\"Estilo de vida \/ Deporte\"><\/i>\n <i class=\"fa-solid fa-leaf gall-pattern-icon icon-g5\" title=\"Salud \/ Bienestar\"><\/i>\n <\/div>\n \n <div class=\"custom-shape-divider-top-1782867776\">\n <svg data-name=\"Layer 1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 1200 120\" preserveAspectRatio=\"none\">\n <path d=\"M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z\" class=\"shape-fill\"><\/path>\n <\/svg>\n <\/div>\n\n <div class=\"gallery-container\">\n \n <div class=\"header-inst\">\n <div class=\"badge-inst\">\n \n Instalaciones\n <\/div>\n\n <h2>\n Un espacio pensado para tu <span class=\"highlight-brand\">atenci\u00f3n<\/span>\n <\/h2>\n\n <div class=\"divider-inst\"><\/div>\n <\/div>\n\n <div class=\"exclusive-marquee-container\">\n <div class=\"exclusive-marquee-track\">\n \n \n <div class=\"exclusiv-angular-card\">\n <div class=\"exclusiv-image-frame\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/Tratamientos-me\u0301dicos.webp\" alt=\"Instalaciones 1\">\n <\/div>\n <\/div>\n\n <div class=\"exclusiv-angular-card\">\n <div class=\"exclusiv-image-frame\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/Nutricio\u0301n-para-bajar-de-peso-1.webp\" alt=\"Instalaciones 2\">\n <\/div>\n <\/div>\n\n <div class=\"exclusiv-angular-card\">\n <div class=\"exclusiv-image-frame\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/8681.webp\" alt=\"Instalaciones 3\">\n <\/div>\n <\/div>\n\n <div class=\"exclusiv-angular-card\">\n <div class=\"exclusiv-image-frame\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2025\/12\/Nutrae-Resize-04.webp\" alt=\"Instalaciones 4\">\n <\/div>\n <\/div>\n\n \n <div class=\"exclusiv-angular-card\">\n <div class=\"exclusiv-image-frame\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/Tratamientos-me\u0301dicos.webp\" alt=\"Instalaciones 1\">\n <\/div>\n <\/div>\n\n <div class=\"exclusiv-angular-card\">\n <div class=\"exclusiv-image-frame\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/Nutricio\u0301n-para-bajar-de-peso-1.webp\" alt=\"Instalaciones 2\">\n <\/div>\n <\/div>\n\n <div class=\"exclusiv-angular-card\">\n <div class=\"exclusiv-image-frame\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/8681.webp\" alt=\"Instalaciones 3\">\n <\/div>\n <\/div>\n\n <div class=\"exclusiv-angular-card\">\n <div class=\"exclusiv-image-frame\">\n <img decoding=\"async\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2025\/12\/Nutrae-Resize-04.webp\" alt=\"Instalaciones 4\">\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n\n <div class=\"exclusive-action-box\">\n <p>\n Queremos que te sientas c\u00f3modo desde el momento en que llegas. Nuestras instalaciones est\u00e1n preparadas para brindar atenci\u00f3n m\u00e9dica en un ambiente profesional y confortable\n <\/p>\n\n <div class=\"qro-fac-cta-wrap\">\n <a href=\"https:\/\/wa.link\/zvs595\" target=\"_blank\" class=\"qro-fac-cta\">\n <i class=\"fa-regular fa-calendar-check\"><\/i>\n Quiero agendar\n <\/a>\n <\/div>\n <\/div>\n \n <\/div>\n\n <div class=\"custom-shape-divider-bottom-1782867776\">\n <svg data-name=\"Layer 1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 1200 120\" preserveAspectRatio=\"none\">\n <path d=\"M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z\" class=\"shape-fill\"><\/path>\n <\/svg>\n <\/div>\n<\/section>\n\n<style>\n \/* ===== PALETA DE COLORES REQUERIDA ===== *\/\n .exclusive-gallery-section {\n --color-01: #f3d8d1;\n --color-02: #e8afa7;\n --color-03: #002842;\n --color-04: #d2a750;\n --color-05: #b37e34;\n --color-06: #245080;\n }\n\n \/* ========================================\n DIVISORES DE FORMA (OLAS ASOCIADAS)\n ======================================== *\/\n .custom-shape-divider-top-1782867776 {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n overflow: hidden;\n line-height: 0;\n z-index: 2;\n }\n\n .custom-shape-divider-top-1782867776 svg {\n position: relative;\n display: block;\n width: calc(100% + 1.3px);\n height: 120px;\n }\n\n .custom-shape-divider-top-1782867776 .shape-fill {\n fill: #FFFFFF;\n }\n\n .custom-shape-divider-bottom-1782867776 {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n overflow: hidden;\n line-height: 0;\n z-index: 2;\n transform: rotate(180deg);\n }\n\n .custom-shape-divider-bottom-1782867776 svg {\n position: relative;\n display: block;\n width: calc(100% + 1.3px);\n height: 120px;\n }\n\n .custom-shape-divider-bottom-1782867776 .shape-fill {\n fill: #FFFFFF;\n }\n\n \/* ===== SECCI\u00d3N GENERAL ===== *\/\n .exclusive-gallery-section {\n width: 100% !important;\n padding: 180px 24px !important;\n position: relative !important;\n background: #FDFCFB !important; \n display: flex !important;\n flex-direction: column !important;\n align-items: center !important;\n overflow: hidden !important;\n font-family: 'Lexend', sans-serif !important;\n }\n\n \/* CAPA: ICONOS ANIMADOS DE FONDO *\/\n .bg-gallery-icons {\n position: absolute !important;\n top: 0 !important;\n left: 0 !important;\n width: 100% !important;\n height: 100% !important;\n z-index: 1 !important;\n pointer-events: none !important;\n }\n\n .gall-pattern-icon {\n position: absolute !important;\n color: var(--color-02) !important;\n opacity: 0.15; \n will-change: transform !important;\n }\n\n \/* Posicionamiento y tiempos de animaci\u00f3n optimizados *\/\n .icon-g1 { font-size: 3rem; top: 15%; left: 8%; animation: galleryFloat 8s ease-in-out infinite; }\n .icon-g2 { font-size: 3.5rem; top: 72%; left: 12%; animation: galleryFloat 11s ease-in-out infinite 1s; }\n .icon-g3 { font-size: 2.8rem; top: 25%; left: 45%; animation: galleryFloat 9s ease-in-out infinite 0.5s; }\n .icon-g4 { font-size: 3.2rem; top: 80%; left: 48%; animation: galleryFloat 10s ease-in-out infinite 1.5s; }\n .icon-g5 { font-size: 4.5rem; top: 12%; right: 10%; animation: galleryFloat 12s ease-in-out infinite; }\n\n @keyframes galleryFloat {\n 0%, 100% { transform: translateY(0) rotate(0deg); }\n 50% { transform: translateY(-15px) rotate(8deg); }\n }\n\n .gallery-container {\n width: 100% !important;\n max-width: 1100px !important;\n margin: 0 auto !important;\n position: relative !important;\n z-index: 4 !important;\n }\n\n \/* --- ENCABEZADO --- *\/\n .exclusive-gallery-section .header-inst {\n text-align: center !important;\n max-width: 900px !important;\n margin: 0 auto !important;\n }\n\n .exclusive-gallery-section .badge-inst {\n display: inline-flex !important;\n align-items: center !important;\n gap: 8px !important;\n padding: 6px 18px !important;\n background: var(--color-01) !important; \n color: var(--color-03) !important;\n border-radius: 30px !important;\n font-size: 0.75rem !important;\n font-weight: 600 !important;\n letter-spacing: 2px !important;\n margin-bottom: 24px !important;\n border: 1px solid var(--color-02) !important;\n }\n\n .exclusive-gallery-section .badge-inst i {\n color: var(--color-06) !important; \n font-size: 0.8rem !important;\n }\n\n .exclusive-gallery-section h2 {\n font-family: 'Literata', serif !important;\n font-size: clamp(1.85rem, 3.8vw, 2.5rem) !important;\n font-weight: 600 !important;\n color: var(--color-03) !important;\n line-height: 1.35 !important;\n letter-spacing: -0.01em !important;\n margin: 0 !important;\n }\n\n .exclusive-gallery-section h2 .highlight-brand {\n color: var(--color-06) !important; \n font-weight: 600 !important;\n }\n\n .exclusive-gallery-section .divider-inst {\n width: 60px !important;\n height: 4px !important;\n background: var(--color-04) !important; \n border-radius: 3px !important;\n margin: 25px auto 0 !important;\n }\n\n \/* --- CARRUSEL MARQUEE --- *\/\n .exclusive-marquee-container {\n width: 100% !important;\n overflow: hidden !important;\n display: flex !important;\n position: relative !important;\n padding: 60px 0 !important;\n }\n\n \/* Difuminados laterales degradados *\/\n .exclusive-marquee-container::before,\n .exclusive-marquee-container::after {\n content: '' !important;\n position: absolute !important;\n top: 0 !important;\n width: 15% !important;\n height: 100% !important;\n z-index: 5 !important;\n pointer-events: none !important;\n }\n .exclusive-marquee-container::before {\n left: 0 !important;\n background: linear-gradient(to right, #FDFCFB, transparent) !important;\n }\n .exclusive-marquee-container::after {\n right: 0 !important;\n background: linear-gradient(to left, #FDFCFB, transparent) !important;\n }\n\n .exclusive-marquee-track {\n display: flex !important;\n gap: 35px !important;\n width: max-content !important;\n \/* Animaci\u00f3n ajustada para desplazarse suavemente un 50% exacto del total de la pista de 8 elementos *\/\n animation: exclusiveScroll 32s linear infinite !important;\n }\n\n .exclusive-marquee-container:hover .exclusive-marquee-track {\n animation-play-state: paused !important;\n }\n\n @keyframes exclusiveScroll {\n 0% { transform: translateX(0); }\n 100% { transform: translateX(calc(-50% - 17.5px)); } \/* 17.5px corresponde a la mitad del gap (35px) para un encaje perfecto *\/\n }\n\n \/* --- TARJETAS DE LA GALER\u00cdA --- *\/\n .exclusiv-angular-card {\n width: 360px !important;\n height: 260px !important;\n position: relative !important;\n background: transparent !important;\n flex-shrink: 0 !important;\n cursor: pointer !important;\n transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;\n }\n\n .exclusiv-angular-card::before {\n content: '' !important;\n position: absolute !important;\n top: 12px !important;\n left: 12px !important;\n right: -12px !important;\n bottom: -12px !important;\n background: transparent !important;\n border-right: 2px solid var(--color-01) !important;\n border-bottom: 2px solid var(--color-01) !important;\n border-radius: 8px !important;\n z-index: 1 !important;\n transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;\n }\n\n .exclusiv-angular-card:nth-child(2n+1)::before { border-color: var(--color-02) !important; }\n .exclusiv-angular-card:nth-child(2n+2)::before { border-color: var(--color-04) !important; }\n\n .exclusiv-angular-card:hover::before {\n transform: translate(6px, 6px) !important;\n border-color: var(--color-06) !important;\n }\n\n .exclusiv-image-frame {\n width: 100% !important;\n height: 100% !important;\n position: relative !important;\n z-index: 3 !important;\n overflow: hidden !important;\n border-radius: 12px !important;\n background: var(--color-01) !important;\n box-shadow: 0 12px 35px rgba(0, 40, 66, 0.05) !important;\n transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;\n border: 1px solid rgba(0, 40, 66, 0.08) !important;\n }\n\n .exclusiv-image-frame img {\n width: 100% !important;\n height: 100% !important;\n object-fit: cover !important;\n display: block !important;\n transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;\n }\n\n .exclusiv-angular-card:hover .exclusiv-image-frame {\n transform: translate(-4px, -4px) !important;\n box-shadow: 0 20px 45px rgba(0, 40, 66, 0.15) !important;\n border-color: rgba(36, 80, 128, 0.3) !important;\n }\n\n .exclusiv-angular-card:hover .exclusiv-image-frame img {\n transform: scale(1.05) !important;\n }\n\n \/* --- BLOQUE DE ACCI\u00d3N CTA INFERIOR --- *\/\n .exclusive-action-box {\n margin-top: 20px !important;\n padding: 0 20px !important;\n text-align: center !important;\n }\n\n .exclusive-action-box p {\n font-family: 'Lexend', sans-serif !important;\n font-size: 1.15rem !important;\n font-weight: 300 !important;\n color: var(--color-03) !important;\n max-width: 720px !important;\n margin: 0 auto 40px !important;\n line-height: 1.65 !important;\n }\n\n \/* ===== ESTILOS DEL BOT\u00d3N PREMIUM ===== *\/\n .qro-fac-cta-wrap {\n display: flex;\n justify-content: center;\n width: 100%;\n }\n\n .qro-fac-cta {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n padding: 18px 40px;\n background: linear-gradient(135deg, var(--color-03) 0%, var(--color-06) 100%);\n color: #ffffff !important;\n font-family: 'Lexend', sans-serif;\n font-size: 1.15rem;\n font-weight: 600;\n text-decoration: none !important;\n border-radius: 16px;\n letter-spacing: -0.01em;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n position: relative;\n z-index: 10;\n }\n\n .qro-fac-cta i {\n font-size: 1.25rem;\n transition: transform 0.3s ease;\n }\n\n \/* Animaci\u00f3n de Anillo de Pulso Dorado *\/\n .qro-fac-cta::after {\n content: '';\n position: absolute;\n inset: -2px;\n border-radius: 18px;\n border: 2px solid var(--color-04);\n opacity: 0;\n animation: qroFacPulseRing 2.5s cubic-bezier(0.25, 0, 0, 1) infinite;\n }\n\n @keyframes qroFacPulseRing {\n 0% { transform: scale(0.98); opacity: 0.8; }\n 60%, 100% { transform: scale(1.08); opacity: 0; }\n }\n\n \/* Efectos Hover del Bot\u00f3n (Cambio a Dorado) *\/\n .qro-fac-cta:hover {\n background: linear-gradient(135deg, var(--color-05) 0%, var(--color-04) 100%);\n transform: translateY(-4px);\n box-shadow: 0 20px 25px -5px rgba(179, 126, 52, 0.25), 0 10px 10px -5px rgba(179, 126, 52, 0.15);\n }\n\n .qro-fac-cta:hover i {\n transform: scale(1.1);\n }\n\n .qro-fac-cta:active {\n transform: translateY(-1px);\n }\n\n \/* --- RESPONSIVE ADAPTATIVO --- *\/\n @media (max-width: 991px) {\n .exclusive-gallery-section {\n padding: 130px 24px !important;\n }\n \n .custom-shape-divider-top-1782867776 svg,\n .custom-shape-divider-bottom-1782867776 svg {\n height: 70px;\n }\n }\n\n @media (max-width: 768px) {\n .exclusive-gallery-section {\n padding: 100px 16px !important;\n }\n\n .gall-pattern-icon { \n opacity: 0.08; \n }\n\n .exclusiv-angular-card {\n width: 290px !important;\n height: 210px !important;\n }\n\n .exclusive-marquee-track {\n gap: 24px !important;\n }\n\n .exclusive-action-box p {\n font-size: 1rem !important;\n margin-bottom: 30px !important;\n }\n\n \/* Ajuste del bot\u00f3n en m\u00f3vil *\/\n .qro-fac-cta {\n width: 100%;\n max-width: 360px;\n padding: 16px 20px;\n font-size: 1.1rem;\n }\n }\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-26cc536 e-con-full e-flex e-con e-parent\" data-id=\"26cc536\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e46088a elementor-widget elementor-widget-html\" data-id=\"e46088a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Literata:ital,opsz,wght@0,7..72,400;0,7..72,600;1,7..72,400&family=Lexend:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\">\n\n<section class=\"dent-faq-section\" id=\"faq\">\n <div class=\"dent-faq-parallax-overlay\"><\/div>\n\n <div class=\"dent-faq-container\">\n\n <header class=\"dent-faq-header\">\n <h2><span class=\"dent-faq-highlight\">Preguntas frecuentes<\/span><\/h2>\n <div class=\"dent-faq-line\"><\/div>\n <\/header>\n\n <div class=\"dent-faq-card-wrapper\">\n\n \n <div class=\"dent-faq-image-side\">\n <div class=\"dent-faq-image-wrapper\">\n <img decoding=\"async\" class=\"animated-stomach\" src=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/2148262173.webp\" alt=\"Preguntas Frecuentes - Cirug\u00eda Bari\u00e1trica\">\n <\/div>\n <\/div>\n\n \n <div class=\"dent-faq-accordion-side\">\n\n <div class=\"dent-faq-item\">\n <div class=\"dent-faq-question\">\n <h3>\u00bfC\u00f3mo s\u00e9 si soy candidato para una manga g\u00e1strica o un bypass g\u00e1strico?<\/h3>\n <span class=\"dent-faq-icon\"><i class=\"fas fa-chevron-down\"><\/i><\/span>\n <\/div>\n <div class=\"dent-faq-answer\">\n <p>La indicaci\u00f3n de un procedimiento bari\u00e1trico depende de una valoraci\u00f3n m\u00e9dica. Durante la consulta se evaluar\u00e1 tu estado de salud, \u00edndice de masa corporal, antecedentes y otros factores para determinar si alguna de estas opciones es adecuada para ti.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"dent-faq-item\">\n <div class=\"dent-faq-question\">\n <h3>\u00bfNecesito llevar estudios m\u00e9dicos a mi consulta?<\/h3>\n <span class=\"dent-faq-icon\"><i class=\"fas fa-chevron-down\"><\/i><\/span>\n <\/div>\n <div class=\"dent-faq-answer\">\n <p>Si cuentas con estudios recientes, como an\u00e1lisis de laboratorio, ultrasonidos o valoraciones previas, es recomendable llevarlos. Si es necesario realizar estudios adicionales, se te indicar\u00e1n durante la consulta<\/p>\n <\/div>\n <\/div>\n\n <div class=\"dent-faq-item\">\n <div class=\"dent-faq-question\">\n <h3>\u00bfQu\u00e9 m\u00e9todos de pago aceptan?<\/h3>\n <span class=\"dent-faq-icon\"><i class=\"fas fa-chevron-down\"><\/i><\/span>\n <\/div>\n <div class=\"dent-faq-answer\">\n <p>Aceptamos diferentes m\u00e9todos de pago para tu comodidad, incluyendo efectivo, transferencia bancaria y tarjetas de d\u00e9bito y cr\u00e9dito. Si tienes alguna duda sobre las formas de pago, nuestro equipo con gusto te orientar\u00e1<\/p>\n <\/div>\n <\/div>\n\n <div class=\"dent-faq-item\">\n <div class=\"dent-faq-question\">\n <h3>\u00bfLos planes de nutrici\u00f3n son personalizados?<\/h3>\n <span class=\"dent-faq-icon\"><i class=\"fas fa-chevron-down\"><\/i><\/span>\n <\/div>\n <div class=\"dent-faq-answer\">\n <p>S\u00ed. Cada plan de alimentaci\u00f3n se dise\u00f1a de acuerdo con tu estado de salud, objetivos, h\u00e1bitos y estilo de vida. El prop\u00f3sito es ofrecer una estrategia que puedas mantener a largo plazo y que forme parte de un tratamiento integral<\/p>\n <\/div>\n <\/div>\n\n <\/div>\n\n <\/div>\n\n \n <div class=\"dent-faq-footer\">\n <div class=\"qro-fac-cta-wrap\">\n <a href=\"https:\/\/wa.link\/zvs595\" target=\"_blank\" class=\"qro-fac-cta\">\n <i class=\"fa-regular fa-calendar-check\"><\/i>\n Quiero agendar\n <\/a>\n <\/div>\n <\/div>\n\n <\/div>\n<\/section>\n\n<style>\n \/* ===== PALETA DE COLORES SOLICITADA ===== *\/\n .dent-faq-section {\n --color-01: #f3d8d1;\n --color-02: #e8afa7;\n --color-03: #002842;\n --color-04: #d2a750;\n --color-05: #b37e34;\n --color-06: #245080;\n }\n\n \/* ===== ESTILOS GENERALES Y SECCI\u00d3N ===== *\/\n .dent-faq-section {\n padding: 80px 24px;\n font-family: 'Lexend', sans-serif;\n position: relative;\n overflow: hidden;\n background-image: url('https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/2148302152.jpg');\n background-attachment: fixed;\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n }\n\n .dent-faq-parallax-overlay {\n position: absolute;\n inset: 0;\n background: rgba(255, 255, 255, 0.75);\n z-index: 0;\n }\n\n .dent-faq-container {\n max-width: 1050px;\n margin: 0 auto;\n position: relative;\n z-index: 1;\n }\n\n \/* ENCABEZADO CON TITULO ELEGANTE *\/\n .dent-faq-header {\n text-align: center;\n margin-bottom: 40px;\n }\n\n .dent-faq-header h2 {\n font-family: 'Literata', serif;\n font-size: 2.4rem; \n font-weight: 600; \n margin: 0;\n line-height: 1.3;\n color: var(--color-03); \n display: inline-block;\n max-width: 850px;\n padding: 20px 40px;\n background: rgba(255, 255, 255, 0.9); \n backdrop-filter: blur(12px); \n -webkit-backdrop-filter: blur(12px); \n border-radius: 16px;\n border: 1px solid var(--color-01); \n box-shadow: 0 10px 30px rgba(0, 40, 66, 0.05);\n }\n\n .dent-faq-line {\n width: 70px;\n height: 4px;\n background: var(--color-04); \n margin: 20px auto 0;\n border-radius: 3px;\n }\n\n \/* CONTENEDOR PRINCIPAL TIPO TARJETA GRID *\/\n .dent-faq-card-wrapper {\n display: grid;\n grid-template-columns: 1fr 1.2fr;\n background: #ffffff;\n border-radius: 24px;\n overflow: hidden;\n box-shadow: 0 20px 40px rgba(0, 40, 66, 0.06);\n border: 1px solid rgba(0, 40, 66, 0.1); \n }\n\n \/* LADO IZQUIERDO: CONTENEDOR DE IMAGEN AJUSTADA AL 100% *\/\n .dent-faq-image-side {\n position: relative;\n background-color: var(--color-01); \n display: flex;\n align-items: stretch; \/* Estira el contenedor para igualar al acorde\u00f3n *\/\n justify-content: center;\n }\n\n .dent-faq-image-wrapper {\n position: relative;\n width: 100%;\n height: 100%;\n min-height: 400px;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n }\n\n \/* Imagen fija reajustada para cubrir todo el lateral *\/\n .dent-faq-image-wrapper img.animated-stomach {\n width: 100%;\n height: 100%;\n object-fit: cover; \/* Hace que la imagen llene el contenedor sin deformarse *\/\n display: block;\n animation: floatStomach 8s ease-in-out infinite;\n }\n\n \/* ANIMACI\u00d3N DE PULSACI\u00d3N SUAVE PARA LA IMAGEN DE FONDO *\/\n @keyframes floatStomach {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.03); }\n 100% { transform: scale(1); }\n }\n\n \/* LADO DERECHO: ACORDE\u00d3N DE PREGUNTAS *\/\n .dent-faq-accordion-side {\n padding: 3rem 2.5rem;\n display: flex;\n flex-direction: column;\n justify-content: center;\n background: #ffffff;\n }\n\n .dent-faq-item {\n border-bottom: 1px solid rgba(0, 40, 66, 0.1); \n padding: 4px 0;\n }\n\n .dent-faq-item:last-child {\n border-bottom: none;\n }\n\n .dent-faq-question {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 18px 0;\n cursor: pointer;\n gap: 16px;\n }\n\n .dent-faq-question h3 {\n font-family: 'Lexend', sans-serif;\n font-size: 1.05rem; \n font-weight: 500; \n color: var(--color-03); \n margin: 0;\n line-height: 1.45;\n transition: color 0.25s ease;\n flex: 1;\n }\n\n .dent-faq-question:hover h3 {\n color: var(--color-06); \n }\n\n .dent-faq-icon {\n flex-shrink: 0;\n width: 34px;\n height: 34px;\n border-radius: 50%;\n background: var(--color-01); \n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--color-03); \n font-size: 0.8rem;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n \/* Estados Activos del Acorde\u00f3n *\/\n .dent-faq-item.active .dent-faq-icon {\n background: var(--color-06); \n color: #ffffff;\n transform: rotate(180deg);\n }\n\n .dent-faq-item.active .dent-faq-question h3 {\n color: var(--color-06);\n font-weight: 600;\n }\n\n .dent-faq-answer {\n max-height: 0;\n overflow: hidden;\n transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .dent-faq-item.active .dent-faq-answer {\n max-height: 400px;\n padding-bottom: 20px;\n }\n\n .dent-faq-answer p {\n font-family: 'Lexend', sans-serif;\n font-size: 0.95rem;\n color: var(--color-03); \n opacity: 0.85;\n line-height: 1.6;\n margin: 0;\n }\n\n \/* ===== ESTILOS DEL BOT\u00d3N PREMIUM ===== *\/\n .dent-faq-footer {\n margin-top: 45px;\n }\n\n .qro-fac-cta-wrap {\n display: flex;\n justify-content: center;\n width: 100%;\n }\n\n .qro-fac-cta {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n padding: 18px 40px;\n background: linear-gradient(135deg, var(--color-03) 0%, var(--color-06) 100%);\n color: #ffffff !important;\n font-family: 'Lexend', sans-serif;\n font-size: 1.15rem;\n font-weight: 600;\n text-decoration: none !important;\n border-radius: 16px;\n letter-spacing: -0.01em;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n position: relative;\n }\n\n .qro-fac-cta i {\n font-size: 1.25rem;\n transition: transform 0.3s ease;\n }\n\n \/* Animaci\u00f3n de Anillo de Pulso *\/\n .qro-fac-cta::after {\n content: '';\n position: absolute;\n inset: -2px;\n border-radius: 18px;\n border: 2px solid var(--color-04);\n opacity: 0;\n animation: qroFacPulseRing 2.5s cubic-bezier(0.25, 0, 0, 1) infinite;\n }\n\n @keyframes qroFacPulseRing {\n 0% { transform: scale(0.98); opacity: 0.8; }\n 60%, 100% { transform: scale(1.08); opacity: 0; }\n }\n\n \/* Efectos Hover del Bot\u00f3n *\/\n .qro-fac-cta:hover {\n background: linear-gradient(135deg, var(--color-05) 0%, var(--color-04) 100%);\n transform: translateY(-4px);\n box-shadow: 0 20px 25px -5px rgba(179, 126, 52, 0.25), 0 10px 10px -5px rgba(179, 126, 52, 0.15);\n }\n\n .qro-fac-cta:hover i {\n transform: scale(1.1);\n }\n\n .qro-fac-cta:active {\n transform: translateY(-1px);\n }\n\n \/* RESPONSIVIDAD *\/\n @media (max-width: 991px) {\n .dent-faq-card-wrapper { grid-template-columns: 1fr 1.1fr; }\n .dent-faq-image-wrapper { min-height: 360px; }\n }\n\n @media (max-width: 868px) {\n .dent-faq-card-wrapper { \n display: flex;\n flex-direction: column;\n }\n .dent-faq-accordion-side { \n order: 1; \n padding: 2.5rem 1.5rem;\n }\n .dent-faq-image-side { \n order: 2;\n border-top: 1px solid rgba(0, 40, 66, 0.1);\n }\n .dent-faq-image-wrapper { min-height: 280px; max-height: 320px; }\n .dent-faq-header h2 { font-size: 1.8rem; padding: 16px 20px; }\n .dent-faq-section { background-attachment: scroll; } \n }\n\n @media (max-width: 768px) {\n .dent-faq-section { padding: 50px 16px; }\n .dent-faq-header h2 { font-size: 1.5rem; padding: 14px 16px; }\n .dent-faq-question h3 { font-size: 0.98rem; }\n .qro-fac-cta { width: 100%; max-width: 360px; box-sizing: border-box; }\n }\n<\/style>\n\n<script>\n document.addEventListener('DOMContentLoaded', function() {\n var faqItems = document.querySelectorAll('.dent-faq-item');\n\n faqItems.forEach(function(item) {\n var question = item.querySelector('.dent-faq-question');\n\n question.addEventListener('click', function() {\n var isActive = item.classList.contains('active');\n faqItems.forEach(function(otherItem) {\n otherItem.classList.remove('active');\n });\n if (!isActive) {\n item.classList.add('active');\n }\n });\n });\n\n if (faqItems.length > 0) {\n faqItems[0].classList.add('active');\n }\n });\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6520427 e-con-full e-flex e-con e-parent\" data-id=\"6520427\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b0e09b9 elementor-widget elementor-widget-html\" data-id=\"b0e09b9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Lexend:wght@300;400;500;600;700&family=Literata:ital,wght@0,400;0,600;1,400&display=swap\" rel=\"stylesheet\">\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\">\n\n\n<section class=\"wen-contacto-section\" id=\"contacto\">\n \n <div class=\"wen-bg-rain-container\">\n <i class=\"fas fa-apple-alt wen-icon-rain r-1\"><\/i>\n <i class=\"fas fa-dumbbell wen-icon-rain r-2\"><\/i>\n <i class=\"fas fa-leaf wen-icon-rain r-3\"><\/i>\n <i class=\"fas fa-carrot wen-icon-rain r-4\"><\/i>\n <i class=\"fas fa-dumbbell wen-icon-rain r-5\"><\/i>\n <i class=\"fas fa-apple-alt wen-icon-rain r-6\"><\/i>\n <i class=\"fas fa-leaf wen-icon-rain r-7\"><\/i>\n <i class=\"fas fa-carrot wen-icon-rain r-8\"><\/i>\n <\/div>\n\n <div class=\"wen-contacto-container\">\n \n <header class=\"wen-contacto-header\">\n <span class=\"wen-contacto-subtitle\">Contacto<\/span>\n <h2 class=\"wen-copy-principal\">\n Hoy puede ser un buen momento para comenzar\n <\/h2>\n <p class=\"wen-copy-desc\">\n No importa en qu\u00e9 etapa te encuentres. Si deseas mejorar tu salud y conocer las alternativas disponibles, estaremos listos para acompa\u00f1arte\n <\/p>\n <div class=\"wen-decorador-linea\"><\/div>\n <\/header>\n\n <div class=\"wen-contacto-wrapper\">\n \n \n <div class=\"wen-columna-info\">\n \n \n <div class=\"wen-info-bloque card-main-click\" onclick=\"window.open('https:\/\/maps.app.goo.gl\/izy33GLexA6sVkXr5', '_blank')\">\n <div class=\"wen-icon-wrapper\">\n <i class=\"fas fa-map-marker-alt\"><\/i>\n <\/div>\n <div class=\"wen-bloque-textos\">\n <div class=\"wen-header-click-title\">\n <h3>Se les acab\u00f3 su gordito<\/h3>\n <span class=\"wen-click-hint\">Ver mapa <i class=\"fas fa-external-link-alt\"><\/i><\/span>\n <\/div>\n <p class=\"wen-direccion-detallada\">\n Centro Comercial Punto MAQ: Av. Miguel \u00c1ngel de Quevedo 1144, Nivel 3, Local 103, Parque San Andr\u00e9s, Coyoac\u00e1n, 04040 Ciudad de M\u00e9xico, CDMX\n <\/p>\n \n <\/div>\n <\/div>\n\n <div class=\"wen-separador-bloques\"><\/div>\n\n \n <div class=\"wen-info-bloque\">\n <div class=\"wen-icon-wrapper\">\n <i class=\"far fa-clock\"><\/i>\n <\/div>\n <div class=\"wen-bloque-textos\">\n <h3>Horarios de atenci\u00f3n<\/h3>\n <div class=\"wen-horarios-list\">\n <p><strong>Lunes a viernes:<\/strong><\/p>\n <p class=\"wen-text-destacado\">9:00 am a 9:00 pm<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n\n \n <div class=\"wen-columna-acciones\">\n \n \n <a href=\"https:\/\/wa.link\/zvs595\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"wen-accion-card card-wa\">\n <div class=\"wen-accion-icon\"><i class=\"fab fa-whatsapp\"><\/i><\/div>\n <div class=\"wen-accion-info\">\n <span class=\"wen-accion-tag\">WhatsApp<\/span>\n <p class=\"wen-accion-numero\">720 925 8687<\/p>\n <\/div>\n <div class=\"wen-accion-arrow\"><i class=\"fas fa-chevron-right\"><\/i><\/div>\n <\/a>\n\n \n <a href=\"tel:5522897556\" class=\"wen-accion-card card-tel\">\n <div class=\"wen-accion-icon\"><i class=\"fas fa-phone-alt\"><\/i><\/div>\n <div class=\"wen-accion-info\">\n <span class=\"wen-accion-tag\">Tel\u00e9fono<\/span>\n <p class=\"wen-accion-numero\">55 2289 7556<\/p>\n <span class=\"wen-accion-ext\">Ext. 4001 y 4002<\/span>\n <\/div>\n <div class=\"wen-accion-arrow\"><i class=\"fas fa-chevron-right\"><\/i><\/div>\n <\/a>\n\n <\/div>\n\n <\/div>\n\n <\/div>\n<\/section>\n\n<style>\n \/* ===== CONFIGURACI\u00d3N BASE Y COLORES ESTABLECIDOS ===== *\/\n .wen-contacto-section {\n padding: 80px 24px;\n background-color: #f3d8d1; \/* Color 01 *\/\n font-family: 'Lexend', sans-serif;\n position: relative;\n overflow: hidden;\n width: 100%;\n }\n\n .wen-contacto-section *, .wen-contacto-section *::before, .wen-contacto-section *::after {\n box-sizing: border-box;\n }\n\n \/* ===== SISTEMA DE LLUVIA ANIMADA EN CA\u00cdDA ===== *\/\n .wen-bg-rain-container {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 1;\n }\n\n .wen-icon-rain {\n position: absolute;\n top: -10%;\n color: #e8afa7; \/* Color 02 - Sutil para el fondo animado *\/\n font-size: 1.8rem;\n user-select: none;\n animation: wenRain linear infinite;\n }\n\n .wen-icon-rain.r-1 { left: 7%; font-size: 2.2rem; animation-duration: 13s; animation-delay: 0s; }\n .wen-icon-rain.r-2 { left: 23%; font-size: 1.5rem; animation-duration: 10s; animation-delay: 2s; }\n .wen-icon-rain.r-3 { left: 40%; font-size: 1.8rem; animation-duration: 15s; animation-delay: 1s; }\n .wen-icon-rain.r-4 { left: 55%; font-size: 2rem; animation-duration: 12s; animation-delay: 3.5s; }\n .wen-icon-rain.r-5 { left: 70%; font-size: 1.4rem; animation-duration: 11s; animation-delay: 0.5s; }\n .wen-icon-rain.r-6 { left: 86%; font-size: 2.4rem; animation-duration: 16s; animation-delay: 4s; }\n .wen-icon-rain.r-7 { left: 94%; font-size: 1.3rem; animation-duration: 9s; animation-delay: 1.8s; }\n .wen-icon-rain.r-8 { left: 48%; font-size: 1.6rem; animation-duration: 14s; animation-delay: 5s; }\n\n @keyframes wenRain {\n 0% { top: -10%; transform: translateX(0) rotate(0deg); opacity: 0; }\n 10% { opacity: 0.7; }\n 90% { opacity: 0.7; }\n 100% { top: 110%; transform: translateX(25px) rotate(360deg); opacity: 0; }\n }\n\n .wen-contacto-container {\n max-width: 1100px;\n margin: 0 auto;\n position: relative;\n z-index: 2;\n }\n\n \/* ENCABEZADO *\/\n .wen-contacto-header {\n text-align: center;\n max-width: 750px;\n margin: 0 auto 55px;\n }\n\n .wen-contacto-subtitle {\n display: block;\n color: #b37e34; \/* Color 05 *\/\n font-weight: 600;\n font-size: 0.9rem;\n letter-spacing: 2px;\n \n margin-bottom: 12px;\n }\n\n .wen-copy-principal {\n font-family: 'Lexend', sans-serif;\n font-size: 2.2rem;\n font-weight: 700;\n line-height: 1.3;\n color: #002842; \/* Color 03 *\/\n margin: 0 0 16px 0;\n }\n\n .wen-copy-desc {\n font-family: 'Literata', serif;\n font-size: 1.15rem;\n color: #245080; \/* Color 06 *\/\n line-height: 1.6;\n margin: 0;\n }\n\n .wen-decorador-linea {\n width: 70px;\n height: 4px;\n background-color: #d2a750; \/* Color 04 *\/\n margin: 24px auto 0;\n border-radius: 4px;\n }\n\n \/* MAQUETACI\u00d3N EN GRID *\/\n .wen-contacto-wrapper {\n display: grid;\n grid-template-columns: 1.25fr 1fr;\n gap: 35px;\n align-items: start;\n }\n\n .wen-columna-info {\n background: #ffffff;\n border-radius: 24px;\n padding: 45px;\n box-shadow: 0 15px 35px rgba(0, 40, 66, 0.05);\n border: 1px solid #e8afa7; \/* Color 02 *\/\n }\n\n .wen-info-bloque {\n display: flex;\n gap: 24px;\n }\n\n .card-main-click {\n cursor: pointer;\n transition: background 0.25s ease;\n padding: 16px;\n margin: -16px;\n border-radius: 20px;\n }\n\n .card-main-click:hover {\n background: #f3d8d1; \/* Color 01 suavecito al pasar el mouse *\/\n }\n\n .wen-header-click-title {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n }\n\n .wen-click-hint {\n font-size: 0.8rem;\n font-weight: 500;\n color: #b37e34; \/* Color 05 *\/\n opacity: 0;\n transform: translateX(-5px);\n transition: all 0.3s ease;\n }\n\n .card-main-click:hover .wen-click-hint {\n opacity: 1;\n transform: translateX(0);\n }\n\n .wen-icon-wrapper {\n width: 52px;\n height: 52px;\n border-radius: 14px;\n background: #002842; \/* Color 03 *\/\n color: #d2a750; \/* Color 04 *\/\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.3rem;\n flex-shrink: 0;\n }\n\n .wen-bloque-textos {\n flex: 1;\n }\n\n .wen-bloque-textos h3 {\n font-size: 1.2rem; \n font-weight: 600;\n color: #002842; \/* Color 03 *\/\n margin: 0 0 8px 0;\n }\n\n .wen-direccion-detallada {\n font-family: 'Literata', serif;\n font-size: 1rem;\n color: #245080; \/* Color 06 *\/\n line-height: 1.6;\n margin: 0 0 16px 0;\n }\n\n .wen-badge-consultorio {\n display: inline-block;\n background: #002842; \/* Color 03 *\/\n color: #d2a750; \/* Color 04 *\/\n font-weight: 600;\n font-size: 0.8rem;\n padding: 6px 14px;\n border-radius: 8px;\n letter-spacing: 0.5px;\n }\n\n .wen-separador-bloques {\n height: 1px;\n background: #e8afa7; \/* Color 02 *\/\n margin: 35px 0;\n }\n\n .wen-horarios-list p {\n font-family: 'Literata', serif;\n font-size: 1.05rem;\n color: #245080; \/* Color 06 *\/\n margin: 0 0 6px 0;\n }\n \n .wen-horarios-list p strong {\n font-family: 'Lexend', sans-serif;\n color: #002842; \/* Color 03 *\/\n font-weight: 500;\n }\n\n .wen-text-destacado {\n font-family: 'Lexend', sans-serif !important;\n font-size: 1.3rem !important;\n font-weight: 700;\n color: #b37e34 !important; \/* Color 05 *\/\n margin-top: 4px;\n }\n\n \/* COLUMNA DE BOTONES DE ACCI\u00d3N *\/\n .wen-columna-acciones {\n display: flex;\n flex-direction: column;\n gap: 20px;\n }\n\n .wen-accion-card {\n background: #002842; \/* Color 03 de fondo *\/\n border-radius: 20px;\n padding: 26px;\n display: flex;\n align-items: center;\n gap: 20px;\n text-decoration: none !important;\n border: 1px solid transparent;\n transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n }\n\n .wen-accion-card:hover {\n transform: translateY(-4px);\n background: #245080; \/* Cambia a Color 06 al pasar mouse *\/\n box-shadow: 0 12px 25px rgba(0, 40, 66, 0.15);\n }\n\n .wen-accion-icon {\n width: 48px;\n height: 48px;\n border-radius: 12px;\n background: rgba(210, 167, 80, 0.1); \n color: #d2a750; \/* Color 04 *\/\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.4rem;\n flex-shrink: 0;\n transition: background 0.3s;\n }\n\n .wen-accion-card:hover .wen-accion-icon {\n background: #002842; \/* Invierte fondo interno *\/\n }\n\n .wen-accion-info { \n flex: 1; \n }\n\n .wen-accion-tag {\n font-size: 0.85rem;\n font-weight: 500;\n color: #e8afa7; \/* Color 02 *\/\n display: block;\n margin-bottom: 4px;\n letter-spacing: 1px;\n \n }\n\n .wen-accion-numero {\n font-size: 1.4rem;\n font-weight: 700;\n margin: 0;\n color: #d2a750; \/* Color 04 *\/\n }\n\n .wen-accion-ext {\n display: block;\n font-family: 'Literata', serif;\n font-size: 0.95rem;\n color: #f3d8d1; \/* Color 01 *\/\n margin-top: 2px;\n }\n \n .wen-accion-arrow { \n color: #e8afa7; \/* Color 02 *\/\n font-size: 1rem; \n transition: transform 0.25s ease, color 0.25s; \n }\n \n .wen-accion-card:hover .wen-accion-arrow { \n transform: translateX(5px); \n color: #d2a750; \/* Color 04 *\/\n }\n\n \/* RESPONSIVE DESIGN *\/\n @media (max-width: 992px) {\n .wen-contacto-wrapper { grid-template-columns: 1fr; gap: 28px; }\n }\n\n @media (max-width: 768px) {\n .wen-contacto-section { padding: 50px 16px; }\n .wen-contacto-header { margin-bottom: 40px; }\n .wen-copy-principal { font-size: 1.75rem; }\n .wen-copy-desc { font-size: 1.05rem; }\n .wen-columna-info { padding: 28px; }\n .wen-info-bloque { gap: 16px; }\n .wen-icon-wrapper { width: 46px; height: 46px; font-size: 1.15rem; }\n .wen-click-hint { display: none; }\n .wen-icon-rain { opacity: 0.4; }\n .wen-accion-numero { font-size: 1.25rem; }\n }\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6f1390a e-con-full e-flex e-con e-parent\" data-id=\"6f1390a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6cf24c5 elementor-widget elementor-widget-html\" data-id=\"6cf24c5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"wen-mapa-seccion\">\n\n <div class=\"wen-map-wrapper\">\n <div class=\"wen-map-header\">\n <div class=\"wen-map-status\">\n <span class=\"wen-map-pulse-dot\"><\/span>\n <span class=\"wen-map-location-text\">Ubicaci\u00f3n de la consulta<\/span>\n <\/div>\n <div class=\"wen-map-brand-badge\">\n <i class=\"fa-solid fa-location-dot\"><\/i> Google Maps\n <\/div>\n <\/div>\n\n <div class=\"wen-map-iframe-container\">\n <iframe src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d4720.4602713842!2d-99.14658!3d19.34299!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x85d1fff1b7efa38f%3A0xf476d9b55a2f2cfd!2sCentro%20Comercial%20Punto%20MAQ!5e1!3m2!1ses-419!2smx!4v1784052763458!5m2!1ses-419!2smx\" width=\"600\" height=\"450\" style=\"border:0;\" allowfullscreen=\"\" loading=\"lazy\" referrerpolicy=\"strict-origin-when-cross-origin\"><\/iframe>\n <\/div>\n <\/div>\n\n <div class=\"wen-shape-divider-map wen-shape-bottom-map\">\n <svg data-name=\"Layer 1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 1200 120\" preserveAspectRatio=\"none\">\n <path d=\"M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z\" fill=\"#F4EFEA\"><\/path>\n <\/svg>\n <\/div>\n\n<\/section>\n\n<style>\n \/* ===== ENVOLTORIO GENERAL CON EL COLOR ACENTUADO ===== *\/\n .wen-mapa-seccion {\n position: relative;\n width: 100%;\n background-color: #F4EFEA; \/* Rosa sutil e intenso que hace juego con las formas *\/\n padding: 60px 0 110px 0; \/* Padding inferior extra para dar espacio a la onda *\/\n }\n\n \/* ===== ESTILO DE LA FORMA INFERIOR ===== *\/\n .wen-shape-divider-map {\n position: absolute;\n left: 0;\n width: 100%;\n overflow: hidden;\n line-height: 0;\n z-index: 3;\n }\n\n .wen-shape-divider-map svg {\n position: relative;\n display: block;\n width: calc(100% + 1.3px);\n height: 85px; \/* Altura ideal de la onda para que sea notoria *\/\n }\n\n .wen-shape-bottom-map {\n bottom: 0;\n transform: translateY(99%); \/* Se posiciona exactamente debajo de la secci\u00f3n *\/\n }\n\n \/* ===== DISE\u00d1O PREMIUM Y PERSONALIZADO DEL MAPA ===== *\/\n .wen-map-wrapper {\n max-width: 900px; \/* Ancho m\u00e1ximo ideal y equilibrado *\/\n margin: 0 auto;\n background: #ffffff;\n border-radius: 24px; \/* Bordes muy curvos y modernos *\/\n padding: 12px; \/* Espacio interior simulando un marco sofisticado *\/\n box-shadow: 0 20px 40px rgba(44, 53, 48, 0.06), \n 0 1px 3px rgba(44, 53, 48, 0.02); \/* Sombra ultra suave *\/\n border: 1px solid #EAE5E1; \/* L\u00ednea divisoria fina tono crema *\/\n font-family: 'Poppins', sans-serif;\n position: relative;\n z-index: 4; \/* Por encima del fondo *\/\n }\n\n \/* Cabecera superior del mapa *\/\n .wen-map-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 14px 16px;\n background: #FDFBF9; \/* Fondo crema muy suave tono branding *\/\n border-radius: 16px 16px 0 0;\n border-bottom: 1px solid #F4EFEA;\n margin-bottom: 12px;\n }\n\n .wen-map-status {\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n \/* Punto verde parpadeante interactivo *\/\n .wen-map-pulse-dot {\n width: 8px;\n height: 8px;\n background-color: #10B981; \/* Tu verde de acci\u00f3n *\/\n border-radius: 50%;\n position: relative;\n }\n\n .wen-map-pulse-dot::after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n background: #10B981;\n border-radius: 50%;\n animation: wenMapPulse 2s infinite ease-in-out;\n opacity: 0.6;\n }\n\n @keyframes wenMapPulse {\n 0% { transform: scale(1); opacity: 0.6; }\n 100% { transform: scale(3); opacity: 0; }\n }\n\n .wen-map-location-text {\n font-size: 0.9rem;\n font-weight: 500;\n color: #2C3530; \/* Tu verde oscuro insignia *\/\n letter-spacing: -0.1px;\n }\n\n \/* Badge o etiqueta derecha *\/\n .wen-map-brand-badge {\n font-size: 0.75rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n color: #B38E8A; \/* Rosa de acento *\/\n background: rgba(179, 142, 138, 0.08);\n padding: 6px 12px;\n border-radius: 30px;\n display: flex;\n align-items: center;\n gap: 6px;\n }\n\n \/* Contenedor estricto del Iframe *\/\n .wen-map-iframe-container {\n width: 100%;\n border-radius: 0 0 16px 16px; \/* Ajusta esquinas inferiores *\/\n overflow: hidden; \/* Obliga al mapa a heredar las curvas *\/\n position: relative;\n background: #F4EFEA;\n line-height: 0; \/* Evita espacios residuales debajo del iframe *\/\n }\n\n \/* Hacer el mapa completamente responsive *\/\n .wen-map-iframe-container iframe {\n display: block;\n width: 100% !important;\n height: 450px;\n filter: grayscale(10%) contrast(102%); \/* Suaviza los colores estridentes nativos de Google *\/\n transition: filter 0.3s ease;\n }\n\n \/* Cuando el usuario pasa el mouse, el mapa recupera su color vivo al 100% *\/\n .wen-map-iframe-container:hover iframe {\n filter: grayscale(0%) contrast(100%);\n }\n\n \/* RESPONSIVIDAD M\u00d3VIL *\/\n @media (max-width: 768px) {\n .wen-mapa-seccion {\n padding: 40px 0 70px 0;\n }\n .wen-shape-divider-map svg {\n height: 50px; \/* Escalado para m\u00f3viles *\/\n }\n .wen-map-wrapper {\n margin: 0 16px;\n padding: 8px;\n border-radius: 18px;\n }\n .wen-map-header {\n padding: 10px 12px;\n }\n .wen-map-location-text {\n font-size: 0.8rem;\n }\n .wen-map-brand-badge {\n font-size: 0.7rem;\n padding: 4px 10px;\n }\n .wen-map-iframe-container iframe {\n height: 350px; \/* Ajuste para scrolls t\u00e1ctiles *\/\n }\n }\n<\/style>\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>Se Les Acab\u00f3 Su Gordito \u00b7 Cl\u00ednica Bari\u00e1trica Se les acab\u00f3 su gordito Cl\u00ednica especialista en nutrici\u00f3n y bariatr\u00eda en […]<\/p>\n","protected":false},"author":1,"featured_media":1345,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-8","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\n<title>Cl\u00ednica de Obesidad en CDMX Coyoac\u00e1n | Especialistas en Control de Peso<\/title>\n<meta name=\"description\" content=\"Cl\u00ednica especializada en sobrepeso y obesidad. Valoraci\u00f3n m\u00e9dica, nutrici\u00f3n, tratamientos bari\u00e1tricos y acompa\u00f1amiento integral para mejorar tu salud\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/selesacabosugordito.com\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cl\u00ednica de Obesidad en CDMX Coyoac\u00e1n | Especialistas en Control de Peso\" \/>\n<meta property=\"og:description\" content=\"Cl\u00ednica especializada en sobrepeso y obesidad. Valoraci\u00f3n m\u00e9dica, nutrici\u00f3n, tratamientos bari\u00e1tricos y acompa\u00f1amiento integral para mejorar tu salud\" \/>\n<meta property=\"og:url\" content=\"https:\/\/selesacabosugordito.com\/\" \/>\n<meta property=\"og:site_name\" content=\"Se les acabo su gordito\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-14T23:37:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/LOGO-COLOR-1.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"464\" \/>\n\t<meta property=\"og:image:height\" content=\"356\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"11 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/selesacabosugordito.com\\\/\",\"url\":\"https:\\\/\\\/selesacabosugordito.com\\\/\",\"name\":\"Cl\u00ednica de Obesidad en CDMX Coyoac\u00e1n | Especialistas en Control de Peso\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/selesacabosugordito.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/selesacabosugordito.com\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/selesacabosugordito.com\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/selesacabosugordito.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/LOGO-COLOR-1.webp\",\"datePublished\":\"2025-12-03T17:02:09+00:00\",\"dateModified\":\"2026-07-14T23:37:53+00:00\",\"description\":\"Cl\u00ednica especializada en sobrepeso y obesidad. Valoraci\u00f3n m\u00e9dica, nutrici\u00f3n, tratamientos bari\u00e1tricos y acompa\u00f1amiento integral para mejorar tu salud\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/selesacabosugordito.com\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/selesacabosugordito.com\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/selesacabosugordito.com\\\/#primaryimage\",\"url\":\"https:\\\/\\\/selesacabosugordito.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/LOGO-COLOR-1.webp\",\"contentUrl\":\"https:\\\/\\\/selesacabosugordito.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/LOGO-COLOR-1.webp\",\"width\":464,\"height\":356},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/selesacabosugordito.com\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/selesacabosugordito.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Consulta\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/selesacabosugordito.com\\\/#website\",\"url\":\"https:\\\/\\\/selesacabosugordito.com\\\/\",\"name\":\"Se les acabo su gordito\",\"description\":\"Cl\u00ednica de Obesidad en CDMX Coyoac\u00e1n\",\"publisher\":{\"@id\":\"https:\\\/\\\/selesacabosugordito.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/selesacabosugordito.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/selesacabosugordito.com\\\/#organization\",\"name\":\"Se les acabo su gordito\",\"url\":\"https:\\\/\\\/selesacabosugordito.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/selesacabosugordito.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/selesacabosugordito.com\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/cropped-cropped-Logoselesacabosugordito.jpeg\",\"contentUrl\":\"https:\\\/\\\/selesacabosugordito.com\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/cropped-cropped-Logoselesacabosugordito.jpeg\",\"width\":512,\"height\":512,\"caption\":\"Se les acabo su gordito\"},\"image\":{\"@id\":\"https:\\\/\\\/selesacabosugordito.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n","yoast_head_json":{"title":"Cl\u00ednica de Obesidad en CDMX Coyoac\u00e1n | Especialistas en Control de Peso","description":"Cl\u00ednica especializada en sobrepeso y obesidad. Valoraci\u00f3n m\u00e9dica, nutrici\u00f3n, tratamientos bari\u00e1tricos y acompa\u00f1amiento integral para mejorar tu salud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/selesacabosugordito.com\/","og_locale":"es_ES","og_type":"article","og_title":"Cl\u00ednica de Obesidad en CDMX Coyoac\u00e1n | Especialistas en Control de Peso","og_description":"Cl\u00ednica especializada en sobrepeso y obesidad. Valoraci\u00f3n m\u00e9dica, nutrici\u00f3n, tratamientos bari\u00e1tricos y acompa\u00f1amiento integral para mejorar tu salud","og_url":"https:\/\/selesacabosugordito.com\/","og_site_name":"Se les acabo su gordito","article_modified_time":"2026-07-14T23:37:53+00:00","og_image":[{"width":464,"height":356,"url":"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/LOGO-COLOR-1.webp","type":"image\/webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Tiempo de lectura":"11 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/selesacabosugordito.com\/","url":"https:\/\/selesacabosugordito.com\/","name":"Cl\u00ednica de Obesidad en CDMX Coyoac\u00e1n | Especialistas en Control de Peso","isPartOf":{"@id":"https:\/\/selesacabosugordito.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/selesacabosugordito.com\/#primaryimage"},"image":{"@id":"https:\/\/selesacabosugordito.com\/#primaryimage"},"thumbnailUrl":"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/LOGO-COLOR-1.webp","datePublished":"2025-12-03T17:02:09+00:00","dateModified":"2026-07-14T23:37:53+00:00","description":"Cl\u00ednica especializada en sobrepeso y obesidad. Valoraci\u00f3n m\u00e9dica, nutrici\u00f3n, tratamientos bari\u00e1tricos y acompa\u00f1amiento integral para mejorar tu salud","breadcrumb":{"@id":"https:\/\/selesacabosugordito.com\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/selesacabosugordito.com\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/selesacabosugordito.com\/#primaryimage","url":"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/LOGO-COLOR-1.webp","contentUrl":"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2026\/07\/LOGO-COLOR-1.webp","width":464,"height":356},{"@type":"BreadcrumbList","@id":"https:\/\/selesacabosugordito.com\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/selesacabosugordito.com\/"},{"@type":"ListItem","position":2,"name":"Consulta"}]},{"@type":"WebSite","@id":"https:\/\/selesacabosugordito.com\/#website","url":"https:\/\/selesacabosugordito.com\/","name":"Se les acabo su gordito","description":"Cl\u00ednica de Obesidad en CDMX Coyoac\u00e1n","publisher":{"@id":"https:\/\/selesacabosugordito.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/selesacabosugordito.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/selesacabosugordito.com\/#organization","name":"Se les acabo su gordito","url":"https:\/\/selesacabosugordito.com\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/selesacabosugordito.com\/#\/schema\/logo\/image\/","url":"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2025\/12\/cropped-cropped-Logoselesacabosugordito.jpeg","contentUrl":"https:\/\/selesacabosugordito.com\/wp-content\/uploads\/2025\/12\/cropped-cropped-Logoselesacabosugordito.jpeg","width":512,"height":512,"caption":"Se les acabo su gordito"},"image":{"@id":"https:\/\/selesacabosugordito.com\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/selesacabosugordito.com\/index.php\/wp-json\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/selesacabosugordito.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/selesacabosugordito.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/selesacabosugordito.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/selesacabosugordito.com\/index.php\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":1003,"href":"https:\/\/selesacabosugordito.com\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":1423,"href":"https:\/\/selesacabosugordito.com\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions\/1423"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/selesacabosugordito.com\/index.php\/wp-json\/wp\/v2\/media\/1345"}],"wp:attachment":[{"href":"https:\/\/selesacabosugordito.com\/index.php\/wp-json\/wp\/v2\/media?parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}