{"id":10,"date":"2023-09-26T22:19:35","date_gmt":"2023-09-26T22:19:35","guid":{"rendered":"https:\/\/osteocolm.es\/?page_id=10"},"modified":"2026-04-15T19:32:23","modified_gmt":"2026-04-15T17:32:23","slug":"inicio","status":"publish","type":"page","link":"https:\/\/atlasprofilaxmadrid.com\/","title":{"rendered":"Inicio"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n    <meta charset=\"UTF-8\">\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Quicksand:wght@400;600;700&#038;display=swap\" rel=\"stylesheet\">\n    <style>\n        \/* VARIABLES CORPORATIVAS *\/\n        :root {\n            --azul-corp: #3998cc;\n            --azul-oscuro: #005a87;\n            --naranja-corp: #f28505;\n            --gris-texto: #444;\n            --purpura-titulos: #704a7a;\n            --accent: #2b8cff;\n            --card-bg: rgba(255,255,255,0.95);\n            --card-shadow: rgba(15,15,15,0.15);\n            --text-color: #111;\n        }\n\n        \/* RESET Y BASE *\/\n        body {\n            margin: 0;\n            font-family: 'Quicksand', sans-serif;\n            background: #f5f7fb;\n            color: var(--gris-texto);\n            overflow-x: hidden;\n        }\n\n        \/* 1. HERO CON ANIMACI\u00d3N *\/\n        .hero {\n            position: relative;\n            min-height: 500px;\n            display: flex;\n            align-items: stretch;\n            border-radius: 12px;\n            overflow: hidden;\n            margin: 24px;\n            box-shadow: 0 6px 20px rgba(10,10,20,0.08);\n            background-color: #000; \/* Fondo base para la transici\u00f3n *\/\n        }\n\n        \/* Capas de imagen para la animaci\u00f3n de desplazamiento *\/\n        .hero-bg-layer {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background-size: cover;\n            background-position: center;\n            z-index: 1;\n        }\n\n        \/* Clase para la animaci\u00f3n de entrada desde la izquierda a derecha *\/\n        .slide-in-right {\n            animation: slideInRight 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;\n        }\n\n        @keyframes slideInRight {\n            0% { transform: translateX(-100%); opacity: 0; }\n            100% { transform: translateX(0); opacity: 1; }\n        }\n\n        .hero-overlay {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6));\n            z-index: 2;\n        }\n\n        .hero-inner {\n            position: relative;\n            display: flex;\n            width: 100%;\n            align-items: flex-end;\n            padding: 36px;\n            z-index: 3;\n        }\n\n        .hero-text {\n            max-width: 50%;\n            color: #fff;\n            padding-right: 24px;\n            padding-bottom: 20px;\n        }\n\n        .badge {\n            display: inline-block;\n            color: rgba(255,255,255,0.9);\n            background: rgba(255,255,255,0.15);\n            padding: 6px 12px;\n            border-radius: 6px;\n            font-size: 13px;\n            margin-bottom: 15px;\n            text-transform: uppercase;\n            letter-spacing: 1px;\n        }\n\n        .hero-text h1 {\n            font-size: 38px;\n            line-height: 1.1;\n            margin-bottom: 15px;\n            color: #fff !important;\n            text-shadow: 0 2px 10px rgba(0,0,0,0.4);\n        }\n\n        \/* 2. MENU DE TARJETAS (CARDS) *\/\n        .card-row {\n            display: flex;\n            gap: 14px;\n            align-items: flex-end;\n            margin-left: auto;\n        }\n\n        .card {\n            width: 90px;\n            height: 90px;\n            background: var(--card-bg);\n            border-radius: 12px;\n            overflow: hidden;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: flex-end;\n            padding: 8px;\n            cursor: pointer;\n            transition: all 0.4s ease;\n            box-shadow: 0 4px 12px var(--card-shadow);\n            border: 2px solid transparent;\n            position: relative;\n        }\n\n        .card img {\n            position: absolute;\n            top: 0; left: 0; width: 100%; height: 100%;\n            object-fit: cover;\n            opacity: 0.8;\n            transition: 0.3s;\n        }\n\n        .card .label {\n            position: relative;\n            z-index: 2;\n            font-size: 11px;\n            font-weight: 700;\n            color: #111;\n            background: rgba(255,255,255,0.95);\n            padding: 4px 6px;\n            border-radius: 6px;\n            width: 100%;\n            text-align: center;\n            white-space: nowrap;\n            overflow: hidden;\n        }\n\n        .card.active {\n    transform: translateY(-15px);\n    border-color: #77a6cb; \/* \u2190 Color reemplazado *\/\n    box-shadow: 0 15px 30px rgba(0,0,0,0.3);\n}\n        .card.active img { opacity: 1; }\n\n        \/* SECCIONES INFERIORES (ESTILO ORIGINAL) *\/\n        .osteocolm-full-width-home { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; background: #fff; }\n        .container-limitado { max-width: 1100px; margin: 0 auto; padding: 0 20px; }\n        .seccion-sano { padding: 80px 0; }\n        .grid-sano { display: grid; grid-template-columns: 1fr 1.4fr; gap: 60px; align-items: center; }\n        .btn-azul { background-color: var(--azul-corp); color: white !important; padding: 10px 30px; border-radius: 50px; text-decoration: none; font-weight: 700; display: inline-block; margin-top: 15px; }\n        .img-fachada { width: 100%; border-radius: 30px; box-shadow: 0 20px 40px rgba(0,0,0,0.15); }\n\n        @media (max-width: 768px) {\n            .hero-inner { flex-direction: column; align-items: center; text-align: center; }\n            .hero-text { max-width: 100%; padding-right: 0; }\n            .card-row { margin-left: 0; margin-top: 20px; flex-wrap: wrap; justify-content: center; }\n        }\n    <\/style>\n<\/head>\n<body>\n\n<div class=\"hero\" id=\"hero-main\">\n    <div id=\"hero-bg\" class=\"hero-bg-layer\"><\/div>\n    <div class=\"hero-overlay\"><\/div>\n\n    <div class=\"hero-inner\">\n        <div class=\"hero-text\">\n            <h1 id=\"hero-title\">Centro especializado en recuperaci\u00f3n<\/h1>\n            <p class=\"lead\" id=\"hero-desc\">Mejora tu bienestar con nuestros tratamientos personalizados y profesionales.<\/p>\n       \n        <\/div>\n\n        <div class=\"card-row\" id=\"menu-cards\">\n            <button class=\"card active\" \n                    data-title=\"Evaluaci\u00f3n Inicial\" \n                    data-bg=\"https:\/\/www.atlasprofilax.es\/fileadmin\/_processed_\/3\/c\/csm_IMG_5359_c15d1ddb12.jpg\">\n                <img decoding=\"async\" src=\"https:\/\/www.atlasprofilax.es\/fileadmin\/_processed_\/3\/c\/csm_IMG_5359_c15d1ddb12.jpg\" alt=\"\">\n                <span class=\"label\">Evaluaci\u00f3n<\/span>\n            <\/button>\n\n            <button class=\"card\" \n                    data-title=\"An\u00e1lisis Detallado\" \n                    data-bg=\"https:\/\/www.atlasprofilax.es\/fileadmin\/_processed_\/5\/c\/csm_IMG_5348_e89731a270.jpg\">\n                <img decoding=\"async\" src=\"https:\/\/www.atlasprofilax.es\/fileadmin\/_processed_\/5\/c\/csm_IMG_5348_e89731a270.jpg\" alt=\"\">\n                <span class=\"label\">An\u00e1lisis<\/span>\n            <\/button>\n\n            <button class=\"card\" \n                    data-title=\"Radiograf\u00edas\" \n                    data-bg=\"https:\/\/www.atlasprofilax.es\/fileadmin\/_processed_\/e\/a\/csm_Measure-x-rays_pencil__mid_web_dadd229924.jpg\">\n                <img decoding=\"async\" src=\"https:\/\/www.atlasprofilax.es\/fileadmin\/_processed_\/e\/a\/csm_Measure-x-rays_pencil__mid_web_dadd229924.jpg\" alt=\"\">\n                <span class=\"label\">Radiograf\u00edas<\/span>\n            <\/button>\n\n            <button class=\"card\" \n                    data-title=\"Tratamiento Personalizado\" \n                    data-bg=\"https:\/\/www.atlasprofilax.es\/fileadmin\/_processed_\/1\/f\/csm_Treatment_closeup_Peter_f50d0d31f5.jpg\">\n                <img decoding=\"async\" src=\"https:\/\/www.atlasprofilax.es\/fileadmin\/_processed_\/1\/f\/csm_Treatment_closeup_Peter_f50d0d31f5.jpg\" alt=\"\">\n                <span class=\"label\">Tratamiento<\/span>\n            <\/button>\n\n            <button class=\"card\" \n                    data-title=\"Seguimiento\" \n                    data-bg=\"https:\/\/www.atlasprofilax.es\/fileadmin\/_processed_\/8\/3\/csm_IMG_5344_58cb88b86e.jpg\">\n                <img decoding=\"async\" src=\"https:\/\/www.atlasprofilax.es\/fileadmin\/_processed_\/8\/3\/csm_IMG_5344_58cb88b86e.jpg\" alt=\"\">\n                <span class=\"label\">Seguimiento<\/span>\n            <\/button>\n        <\/div>\n    <\/div>\n<\/div>\n\n<div class=\"osteocolm-full-width-home\">\n    <section class=\"container-limitado seccion-sano\">\n        <div class=\"grid-sano\">\n            <div class=\"sano-text\">\n                <h2>Mant\u00e9ngase sano y libre de dolor con OSTEOCOLM<\/h2>\n                <p>Nuestros servicios no son exclusivamente un medio terap\u00e9utico de curaci\u00f3n. V\u00e9anlos como un medio de prevenci\u00f3n para conservar su bienestar.<\/p>\n                <a href=\"#\" class=\"btn-azul\">Con\u00f3zcanos<\/a>\n            <\/div>\n            <div class=\"sano-img-container\">\n                <img decoding=\"async\" src=\"https:\/\/osteocolm.es\/wp-content\/uploads\/2023\/09\/osteocolm-quienes-somos.webp\" class=\"img-fachada\" alt=\"Fachada Osteocolm\">\n            <\/div>\n        <\/div>\n    <\/section>\n<\/div>\n\n<script>\n    document.addEventListener(\"DOMContentLoaded\", function() {\n        const cards = document.querySelectorAll('.card');\n        const bgLayer = document.getElementById('hero-bg');\n        const titleElem = document.getElementById('hero-title');\n        let currentIndex = 0;\n\n        function changeSection(index) {\n            \/\/ 1. Actualizar clases del men\u00fa\n            cards.forEach(c => c.classList.remove('active'));\n            const activeCard = cards[index];\n            activeCard.classList.add('active');\n\n            \/\/ 2. Obtener datos de la tarjeta\n            const newImg = activeCard.getAttribute('data-bg');\n            const newTitle = activeCard.getAttribute('data-title');\n\n            \/\/ 3. Reiniciar animaci\u00f3n de desplazamiento a la derecha\n            bgLayer.classList.remove('slide-in-right');\n            void bgLayer.offsetWidth; \/\/ Trigger reflow para reiniciar CSS animation\n            \n            bgLayer.style.backgroundImage = `url('${newImg}')`;\n            bgLayer.classList.add('slide-in-right');\n\n            \/\/ 4. Cambiar texto (opcional)\n            if(newTitle) titleElem.innerText = newTitle;\n        }\n\n        \/\/ Inicializar\n        changeSection(0);\n\n        \/\/ Rotaci\u00f3n autom\u00e1tica cada 30 segundos\n        setInterval(() => {\n            currentIndex = (currentIndex + 1) % cards.length;\n            changeSection(currentIndex);\n        }, 30000);\n\n        \/\/ Permitir clic manual\n        cards.forEach((card, index) => {\n            card.addEventListener('click', () => {\n                currentIndex = index;\n                changeSection(index);\n            });\n        });\n    });\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Centro especializado en recuperaci\u00f3n Mejora tu bienestar con nuestros tratamientos personalizados y profesionales. Evaluaci\u00f3n An\u00e1lisis Radiograf\u00edas Tratamiento Seguimiento Mant\u00e9ngase sano y libre de dolor con OSTEOCOLM Nuestros servicios no son&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-10","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/atlasprofilaxmadrid.com\/index.php\/wp-json\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/atlasprofilaxmadrid.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/atlasprofilaxmadrid.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/atlasprofilaxmadrid.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/atlasprofilaxmadrid.com\/index.php\/wp-json\/wp\/v2\/comments?post=10"}],"version-history":[{"count":13,"href":"https:\/\/atlasprofilaxmadrid.com\/index.php\/wp-json\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":3863,"href":"https:\/\/atlasprofilaxmadrid.com\/index.php\/wp-json\/wp\/v2\/pages\/10\/revisions\/3863"}],"wp:attachment":[{"href":"https:\/\/atlasprofilaxmadrid.com\/index.php\/wp-json\/wp\/v2\/media?parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}