/* ===== VARIABLES DE MARCA NOAH'S ===== */

        :root {

            --primary-blue: #3A63B8;

            --primary-blue-dark: #2a4d8a;

            --primary-blue-light: #dce6f5;

            --teal: #49C2BE;

            --teal-dark: #349e9a;

            --teal-light: #d4f4f2;

            --purple: #8B4FA8;

            --purple-light: #e8d9f0;

            --pink: #E43682;

            --pink-light: #f8d9e8;

            --orange: #F36B35;

            --orange-light: #fde8d9;

            --red: #F04A38;

            --red-light: #fcd9d5;

            --white: #ffffff;

            --gray-bg: #f5f7fb;

            --gray-text: #4a5f7a;

            --shadow: 0 8px 30px rgba(58, 99, 184, 0.10);

            --radius: 24px;

        }



        * {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }



        body {

            font-family: 'Inter', sans-serif;

            background: var(--gray-bg);

            color: #1a2a3a;

            line-height: 1.6;

        }



        .container {

            max-width: 1280px;

            margin: 0 auto;

            padding: 0 30px;

        }



        /* ===== HEADER CON LOGO NOAH'S ===== */

        header {

            background: var(--white);

            box-shadow: 0 2px 16px rgba(58, 99, 184, 0.08);

            padding: 12px 0;

            position: sticky;

            top: 0;

            z-index: 100;

        }



        .nav-flex {

            display: flex;

            align-items: center;

            justify-content: space-between;

        }



        .logo {

            display: flex;

            align-items: center;

            gap: 16px;

            text-decoration: none;

        }



        /* ===== LOGO CON IMAGEN ===== */

        .logo-img {

            height: 50px;

            width: auto;

            display: block;

        }



        .logo-divider {

            width: 2px;

            height: 40px;

            background: linear-gradient(to bottom, var(--teal), var(--pink));

            border-radius: 4px;

        }



        .logo-dental {

            display: flex;

            flex-direction: column;

            line-height: 1;

        }

        .logo-dental .dental {

            font-size: 20px;

            font-weight: 800;

            color: var(--primary-blue);

        }

        .logo-dental .dental span { color: var(--pink); }

        .logo-dental .sub {

            font-size: 8px;

            font-weight: 600;

            letter-spacing: 2px;

            text-transform: uppercase;

            color: var(--gray-text);

        }



        .nav-links {

            display: flex;

            gap: 32px;

            font-weight: 500;

            align-items: center;

        }

        .nav-links a {

            text-decoration: none;

            color: var(--gray-text);

            font-size: 15px;

            transition: 0.2s;

        }

        .nav-links a:hover { color: var(--primary-blue); }

        .nav-links a i { color: var(--teal); margin-right: 4px; }

        .btn-outline {

            border: 2px solid var(--primary-blue);

            background: transparent;

            padding: 8px 24px;

            border-radius: 40px;

            font-weight: 600;

            color: var(--primary-blue);

            transition: 0.2s;

            cursor: pointer;

            font-size: 14px;

        }

        .btn-outline:hover { background: var(--primary-blue); color: var(--white); }



        /* ===== HERO ===== */

        .hero {

            padding: 50px 0 20px 0;

            text-align: center;

            position: relative;

        }

        .hero::before {

            content: '';

            position: absolute;

            top: -100px;

            right: -100px;

            width: 400px;

            height: 400px;

            background: radial-gradient(circle, var(--teal-light) 0%, transparent 70%);

            border-radius: 50%;

            opacity: 0.3;

            z-index: 0;

        }

        .hero > * {

            position: relative;

            z-index: 1;

        }

        .hero-badge {

            background: var(--teal-light);

            color: var(--teal-dark);

            padding: 6px 20px;

            border-radius: 40px;

            font-size: 13px;

            font-weight: 700;

            display: inline-block;

            margin-bottom: 20px;

            letter-spacing: 0.5px;

        }

        .hero-badge i { color: var(--pink); }

        .hero h1 {

            font-size: 48px;

            font-weight: 800;

            line-height: 1.15;

            max-width: 800px;

            margin: 0 auto 16px;

            color: var(--primary-blue);

        }

        .hero h1 .highlight {

            background: linear-gradient(135deg, var(--teal), var(--purple));

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;

            background-clip: text;

        }

        .hero h1 i {

            color: var(--pink);

            -webkit-text-fill-color: var(--pink);

        }

        .hero p {

            font-size: 18px;

            color: var(--gray-text);

            max-width: 640px;

            margin: 0 auto 32px;

        }

        .hero p strong { color: var(--primary-blue); }

        .hero .btn-primary {

            background: var(--primary-blue);

            color: var(--white);

            border: none;

            padding: 16px 48px;

            border-radius: 60px;

            font-size: 18px;

            font-weight: 700;

            cursor: pointer;

            transition: 0.25s;

            box-shadow: 0 8px 24px rgba(58, 99, 184, 0.30);

        }

        .hero .btn-primary:hover {

            background: var(--primary-blue-dark);

            transform: scale(1.02);

            box-shadow: 0 12px 32px rgba(58, 99, 184, 0.40);

        }

        .hero .btn-primary i { margin-right: 10px; }



        /* ===== BUSCADOR ===== */

        .search-section {

            background: var(--white);

            border-radius: 60px;

            padding: 10px 10px 10px 28px;

            display: flex;

            flex-wrap: wrap;

            align-items: center;

            justify-content: space-between;

            max-width: 820px;

            margin: 40px auto 20px;

            box-shadow: var(--shadow);

            border: 1px solid #e8ecf3;

        }

        .search-section i { color: var(--primary-blue); font-size: 18px; }

        .search-section input {

            border: none;

            padding: 14px 10px;

            font-size: 16px;

            flex: 1;

            min-width: 180px;

            outline: none;

            background: transparent;

            font-weight: 500;

            color: #1a2a3a;

        }

        .search-section input::placeholder { color: #a0b0c5; }

        .search-section select {

            border: none;

            background: var(--gray-bg);

            padding: 12px 20px;

            border-radius: 40px;

            font-size: 14px;

            font-weight: 500;

            color: #1a2a3a;

            outline: none;

            cursor: pointer;

            border: 1px solid transparent;

            transition: 0.2s;

        }

        .search-section select:focus { border-color: var(--teal); }

        .search-section .btn-search {

            background: var(--teal);

            border: none;

            color: var(--white);

            padding: 12px 32px;

            border-radius: 40px;

            font-weight: 700;

            cursor: pointer;

            transition: 0.2s;

            font-size: 15px;

        }

        .search-section .btn-search:hover { background: var(--teal-dark); }



        /* ===== STATS ===== */

        .stats {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));

            gap: 16px;

            margin: 30px 0 10px;

            text-align: center;

        }

        .stat-item {

            background: var(--white);

            padding: 20px 16px;

            border-radius: 16px;

            border: 1px solid #e8ecf3;

            box-shadow: var(--shadow);

            transition: 0.2s;

        }

        .stat-item:hover {

            border-color: var(--teal);

            transform: translateY(-2px);

        }

        .stat-item .number {

            font-size: 32px;

            font-weight: 800;

            color: var(--primary-blue);

        }

        .stat-item .number .icon-teal { color: var(--teal); }

        .stat-item .number .icon-purple { color: var(--purple); }

        .stat-item .number .icon-pink { color: var(--pink); }

        .stat-item .number .icon-orange { color: var(--orange); }

        .stat-item .label {

            font-size: 13px;

            color: var(--gray-text);

            font-weight: 500;

        }



        /* ===== DOCTORES ===== */

        .section-title {

            font-size: 30px;

            font-weight: 800;

            margin: 50px 0 8px;

            display: flex;

            align-items: center;

            gap: 12px;

            color: var(--primary-blue);

        }

        .section-title i { color: var(--pink); }

        .subtitle {

            color: var(--gray-text);

            margin-bottom: 30px;

            font-size: 16px;

        }



        .doctors-grid {

            display: grid;

            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

            gap: 28px;

        }



        .doctor-card {

            background: var(--white);

            border-radius: var(--radius);

            padding: 26px 22px;

            box-shadow: var(--shadow);

            border: 1px solid #e8ecf3;

            transition: 0.25s;

            position: relative;

        }

        .doctor-card:hover {

            transform: translateY(-6px);

            box-shadow: 0 16px 40px rgba(58, 99, 184, 0.12);

            border-color: var(--teal);

        }

        .doctor-card .badge-specialty {

            position: absolute;

            top: 16px;

            right: 16px;

            font-size: 11px;

            font-weight: 700;

            padding: 4px 14px;

            border-radius: 30px;

            letter-spacing: 0.3px;

        }

        .badge-periodoncia { background: var(--teal-light); color: var(--teal-dark); }

        .badge-ortodoncia { background: var(--purple-light); color: var(--purple); }

        .badge-implantologia { background: var(--orange-light); color: var(--orange); }

        .badge-endodoncia { background: var(--pink-light); color: var(--pink); }

        .badge-cirugia { background: var(--red-light); color: var(--red); }

        .badge-odontopediatria { background: var(--primary-blue-light); color: var(--primary-blue); }



        .doctor-card .avatar {

            width: 80px;

            height: 80px;

            background: var(--gray-bg);

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 34px;

            font-weight: 700;

            color: var(--primary-blue);

            margin-bottom: 12px;

            border: 3px solid var(--teal-light);

        }

        .doctor-card h3 {

            font-size: 20px;

            font-weight: 700;

            color: var(--primary-blue);

        }

        .doctor-card .specialty {

            color: var(--teal-dark);

            font-weight: 600;

            font-size: 14px;

            letter-spacing: 0.3px;

            margin: 4px 0 8px;

        }

        .doctor-card .exp {

            color: var(--gray-text);

            font-size: 14px;

            margin-bottom: 14px;

        }

        .doctor-card .availability {

            display: flex;

            align-items: center;

            gap: 8px;

            font-size: 14px;

            font-weight: 600;

            background: #e6f3e6;

            color: #1a7a3a;

            padding: 6px 14px;

            border-radius: 40px;

            width: fit-content;

        }

        .doctor-card .availability i { font-size: 10px; color: #22a65a; }

        .doctor-card .availability.unavailable {

            background: var(--red-light);

            color: var(--red);

        }

        .doctor-card .availability.unavailable i { color: var(--red); }

        .doctor-card .btn-book {

            margin-top: 18px;

            width: 100%;

            background: var(--gray-bg);

            border: none;

            padding: 12px;

            border-radius: 40px;

            font-weight: 700;

            color: var(--primary-blue);

            cursor: pointer;

            transition: 0.2s;

            font-size: 15px;

        }

        .doctor-card .btn-book:hover:not(:disabled) {

            background: var(--primary-blue);

            color: var(--white);

        }

        .doctor-card .btn-book:disabled {

            opacity: 0.5;

            cursor: not-allowed;

        }



        /* ===== OFICINAS ===== */

        .offices {

            background: var(--white);

            border-radius: var(--radius);

            padding: 32px 36px;

            margin: 50px 0 30px;

            border: 1px solid #e8ecf3;

            box-shadow: var(--shadow);

            display: flex;

            flex-wrap: wrap;

            justify-content: space-between;

            align-items: center;

        }

        .offices h3 {

            font-size: 22px;

            font-weight: 700;

            color: var(--primary-blue);

        }

        .offices h3 i { color: var(--pink); margin-right: 10px; }

        .office-item {

            display: flex;

            align-items: center;

            gap: 18px;

            flex-wrap: wrap;

        }

        .office-item i {

            font-size: 20px;

            color: var(--white);

            width: 44px;

            height: 44px;

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

        }

        .office-item .icon-teal { background: var(--teal); }

        .office-item .icon-purple { background: var(--purple); }

        .office-item .icon-orange { background: var(--orange); }

        .office-item span {

            font-weight: 500;

            color: #2a3f5a;

        }

        .office-item .highlight {

            padding: 4px 16px;

            border-radius: 30px;

            font-size: 12px;

            font-weight: 700;

        }

        .highlight-teal { background: var(--teal-light); color: var(--teal-dark); }

        .highlight-purple { background: var(--purple-light); color: var(--purple); }

        .highlight-pink { background: var(--pink-light); color: var(--pink); }



        /* ================================================================ */

        /* ===== CHAT IA - OVERLAY ===== */

        /* ================================================================ */

        .chat-overlay {

            display: none;

            position: fixed;

            top: 0; left: 0;

            width: 100%; height: 100%;

            background: rgba(26, 42, 74, 0.40);

            backdrop-filter: blur(6px);

            justify-content: center;

            align-items: center;

            z-index: 999;

        }

        .chat-overlay.active { display: flex; }



        .chat-box {

            background: var(--white);

            width: 480px;

            max-width: 94%;

            max-height: 90vh;

            border-radius: 28px;

            box-shadow: 0 30px 60px rgba(58, 99, 184, 0.25);

            display: flex;

            flex-direction: column;

            overflow: hidden;

            animation: fadeUp 0.35s ease;

        }

        @keyframes fadeUp {

            0% { transform: translateY(30px) scale(0.97); opacity: 0; }

            100% { transform: translateY(0) scale(1); opacity: 1; }

        }



        .chat-header {

            background: linear-gradient(135deg, var(--primary-blue), var(--purple));

            padding: 18px 24px;

            display: flex;

            align-items: center;

            justify-content: space-between;

            flex-shrink: 0;

        }

        .chat-header-left {

            display: flex;

            align-items: center;

            gap: 14px;

        }

        .chat-avatar {

            width: 44px;

            height: 44px;

            border-radius: 50%;

            background: var(--white);

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 20px;

            font-weight: 700;

            color: var(--primary-blue);

        }

        .chat-avatar i { font-size: 22px; color: var(--teal); }

        .chat-header-info h3 {

            color: var(--white);

            font-size: 16px;

            font-weight: 700;

            margin: 0;

        }

        .chat-header-info p {

            color: rgba(255,255,255,0.75);

            font-size: 12px;

            font-weight: 500;

            margin: 0;

        }

        .chat-header-info p i {

            color: #7ddf7d;

            font-size: 8px;

            margin-right: 4px;

        }

        .chat-close {

            background: rgba(255,255,255,0.15);

            border: none;

            color: var(--white);

            width: 36px;

            height: 36px;

            border-radius: 50%;

            font-size: 20px;

            cursor: pointer;

            transition: 0.2s;

            display: flex;

            align-items: center;

            justify-content: center;

        }

        .chat-close:hover { background: rgba(255,255,255,0.25); }



        .chat-messages {

            flex: 1;

            padding: 20px 20px 10px 20px;

            overflow-y: auto;

            background: var(--gray-bg);

            display: flex;

            flex-direction: column;

            gap: 12px;

            min-height: 380px;

            max-height: 460px;

        }

        .chat-messages::-webkit-scrollbar { width: 4px; }

        .chat-messages::-webkit-scrollbar-track { background: transparent; }

        .chat-messages::-webkit-scrollbar-thumb { background: var(--teal); border-radius: 10px; }



        .message {

            max-width: 85%;

            padding: 12px 18px;

            border-radius: 18px;

            font-size: 14px;

            line-height: 1.5;

            animation: messageIn 0.3s ease;

        }

        @keyframes messageIn {

            0% { opacity: 0; transform: translateY(10px) scale(0.97); }

            100% { opacity: 1; transform: translateY(0) scale(1); }

        }



        .message-ia {

            align-self: flex-start;

            background: var(--white);

            color: #1a2a3a;

            border-bottom-left-radius: 6px;

            box-shadow: 0 2px 8px rgba(0,0,0,0.04);

            border: 1px solid #e8ecf3;

        }

        .message-ia .msg-time {

            font-size: 10px;

            color: var(--gray-text);

            opacity: 0.6;

            display: block;

            margin-top: 4px;

        }

        .message-ia .msg-icon {

            display: inline-block;

            margin-right: 6px;

            color: var(--teal);

        }



        .message-user {

            align-self: flex-end;

            background: var(--primary-blue);

            color: var(--white);

            border-bottom-right-radius: 6px;

        }

        .message-user .msg-time {

            font-size: 10px;

            color: rgba(255,255,255,0.6);

            display: block;

            margin-top: 4px;

            text-align: right;

        }



        .quick-options {

            align-self: flex-start;

            display: flex;

            flex-wrap: wrap;

            gap: 8px;

            margin-top: 4px;

        }

        .quick-options .opt-btn {

            background: var(--white);

            border: 2px solid var(--teal-light);

            padding: 8px 16px;

            border-radius: 30px;

            font-size: 13px;

            font-weight: 600;

            color: var(--primary-blue);

            cursor: pointer;

            transition: 0.2s;

            font-family: 'Inter', sans-serif;

        }

        .quick-options .opt-btn:hover {

            background: var(--teal-light);

            border-color: var(--teal);

            transform: scale(1.02);

        }

        .quick-options .opt-btn i { color: var(--teal); margin-right: 6px; }



        .chat-input-area {

            padding: 14px 20px 18px 20px;

            border-top: 1px solid #e8ecf3;

            background: var(--white);

            display: flex;

            gap: 10px;

            align-items: center;

            flex-shrink: 0;

        }

        .chat-input-area input {

            flex: 1;

            border: 2px solid #e8ecf3;

            border-radius: 30px;

            padding: 12px 18px;

            font-size: 14px;

            outline: none;

            font-family: 'Inter', sans-serif;

            background: var(--gray-bg);

            transition: 0.2s;

            color: #1a2a3a;

        }

        .chat-input-area input:focus {

            border-color: var(--teal);

            background: var(--white);

        }

        .chat-input-area input::placeholder { color: #a0b0c5; }

        .chat-input-area .btn-send {

            background: var(--primary-blue);

            border: none;

            color: var(--white);

            width: 48px;

            height: 48px;

            border-radius: 50%;

            font-size: 18px;

            cursor: pointer;

            transition: 0.2s;

            flex-shrink: 0;

            display: flex;

            align-items: center;

            justify-content: center;

        }

        .chat-input-area .btn-send:hover {

            background: var(--primary-blue-dark);

            transform: scale(1.04);

        }



        .typing-indicator {

            align-self: flex-start;

            background: var(--white);

            padding: 12px 20px;

            border-radius: 18px;

            border-bottom-left-radius: 6px;

            border: 1px solid #e8ecf3;

            display: none;

            gap: 4px;

            align-items: center;

        }

        .typing-indicator.active { display: flex; }

        .typing-indicator span {

            width: 8px;

            height: 8px;

            background: var(--gray-text);

            border-radius: 50%;

            animation: typing 1.4s infinite;

        }

        .typing-indicator span:nth-child(2) { animation-delay: 0.2s; }

        .typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

        @keyframes typing {

            0%, 60%, 100% { transform: translateY(0); opacity: 0.3; }

            30% { transform: translateY(-8px); opacity: 1; }

        }



        /* ===== FOOTER ===== */

        footer {

            margin-top: 60px;

            padding: 30px 0;

            border-top: 2px solid #e8ecf3;

            text-align: center;

        }

        .footer-brand {

            display: flex;

            flex-direction: column;

            align-items: center;

            gap: 2px;

        }

        .footer-brand .noah {

            font-size: 28px;

            font-weight: 900;

            letter-spacing: 1.5px;

            color: var(--primary-blue);

        }

        .footer-brand .noah span { color: var(--teal); }

        .footer-brand .creative {

            font-size: 8px;

            font-weight: 600;

            letter-spacing: 3.5px;

            text-transform: uppercase;

            color: var(--gray-text);

        }

        .footer-brand .creative span { color: var(--purple); }

        footer .footer-text {

            color: var(--gray-text);

            font-size: 13px;

            margin-top: 8px;

        }

        footer .footer-text i { color: var(--pink); }

        .footer-colors {

            display: inline-flex;

            gap: 6px;

            margin-top: 6px;

            align-items: center;

        }

        .footer-colors .color-dot {

            width: 14px;

            height: 14px;

            border-radius: 50%;

            display: inline-block;

            border: 2px solid var(--white);

            box-shadow: 0 2px 6px rgba(0,0,0,0.10);

        }



        /* ===== RESPONSIVE ===== */

        @media (max-width: 800px) {

            .hero h1 { font-size: 32px; }

            .nav-links { display: none; }

            .search-section { border-radius: 30px; padding: 16px; flex-direction: column; gap: 12px; }

            .search-section input { width: 100%; }

            .offices { flex-direction: column; align-items: flex-start; gap: 16px; }

            .stats { grid-template-columns: 1fr 1fr; }

            .logo-img { height: 38px; }

            .logo-dental .dental { font-size: 16px; }

            .logo-divider { height: 30px; }

            .chat-box { max-height: 95vh; border-radius: 20px; }

            .chat-messages { min-height: 300px; max-height: 380px; padding: 16px; }

            .message { max-width: 92%; font-size: 13px; }

        }