:root {
            --primary: #087f8c;
            --primary-dark: #05636d;
            --secondary: #f2a900;
            --green: #3c8d40;
            --dark: #1e2930;
            --text: #34454c;
            --light: #f5f7f7;
            --white: #ffffff;
            --border: #e4e8e9;
            --shadow: 0 8px 25px rgba(0,0,0,.08);
            --radius: 12px;
        }

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            font-family:
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                Roboto,
                Arial,
                sans-serif;
            color: var(--text);
            background: #fff;
            line-height: 1.7;
        }

        img {
            max-width: 100%;
            display: block;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        .container {
            width: min(1180px, calc(100% - 32px));
            margin: auto;
        }

        /* =========================
           HEADER
        ========================= */

        .topbar {
            background: var(--primary);
            color: #fff;
            font-size: 14px;
        }

        .topbar-inner {
            min-height: 38px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
        }

        .topbar a {
            opacity: .95;
        }

        header {
            background: #fff;
            border-bottom: 1px solid var(--border);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .header-inner {
            min-height: 78px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 30px;
        }

        .logo {
            font-size: 25px;
            font-weight: 800;
            color: var(--primary);
            letter-spacing: -.5px;
            white-space: nowrap;
        }

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

        nav {
            display: flex;
            align-items: center;
            gap: 25px;
            font-size: 15px;
            font-weight: 600;
        }

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

        .menu-button {
            display: none;
            border: 0;
            background: transparent;
            font-size: 28px;
            cursor: pointer;
        }

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

        .hero {
            min-height: 510px;
            display: flex;
            align-items: center;
            color: #fff;
            background:
                linear-gradient(
                    90deg,
                    rgba(0, 60, 70, .86),
                    rgba(0, 100, 110, .45)
                ),
                url("https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1800&q=85")
                center / cover;
        }

        .hero-content {
            max-width: 760px;
            padding: 70px 0;
        }

        .eyebrow {
            display: inline-block;
            padding: 7px 13px;
            background: rgba(255,255,255,.16);
            border: 1px solid rgba(255,255,255,.25);
            border-radius: 30px;
            font-size: 13px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .6px;
            margin-bottom: 20px;
        }

        .hero h1 {
            font-size: clamp(38px, 5vw, 62px);
            line-height: 1.05;
            margin: 0 0 22px;
            letter-spacing: -1.5px;
        }

        .hero p {
            font-size: 20px;
            line-height: 1.6;
            max-width: 700px;
            margin: 0 0 30px;
        }

        .hero-buttons {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }

        .button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 48px;
            padding: 0 22px;
            border-radius: 7px;
            font-weight: 700;
            transition: .2s;
        }

        .button-primary {
            background: var(--secondary);
            color: #202020;
        }

        .button-primary:hover {
            transform: translateY(-2px);
        }

        .button-light {
            background: #fff;
            color: var(--primary);
        }

        /* =========================
           QUICK NAV
        ========================= */

        .quick-nav {
            background: #fff;
            box-shadow: var(--shadow);
            position: relative;
            z-index: 5;
        }

        .quick-nav-inner {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
        }

        .quick-item {
            padding: 22px 10px;
            text-align: center;
            border-right: 1px solid var(--border);
            font-weight: 700;
            font-size: 14px;
            color: var(--dark);
        }

        .quick-item:last-child {
            border-right: 0;
        }

        .quick-icon {
            display: block;
            font-size: 25px;
            margin-bottom: 5px;
        }

        .quick-item:hover {
            color: var(--primary);
            background: #f8fbfb;
        }

        /* =========================
           CONTENT
        ========================= */

        section {
            padding: 70px 0;
        }

        .section-header {
            max-width: 760px;
            margin-bottom: 35px;
        }

        .section-header h2 {
            color: var(--dark);
            font-size: clamp(28px, 4vw, 40px);
            line-height: 1.2;
            margin: 0 0 14px;
        }

        .section-header p {
            margin: 0;
            font-size: 17px;
        }

        .intro {
            background: #fff;
        }

        .intro-grid {
            display: grid;
            grid-template-columns: 1.4fr .8fr;
            gap: 50px;
            align-items: start;
        }

        .intro-text p {
            font-size: 17px;
        }

        .highlight-box {
            background: var(--light);
            border-left: 5px solid var(--primary);
            padding: 25px;
            border-radius: 0 var(--radius) var(--radius) 0;
        }

        .highlight-box strong {
            display: block;
            color: var(--dark);
            font-size: 18px;
            margin-bottom: 8px;
        }

        /* =========================
           CATEGORIES
        ========================= */

        .categories {
            background: var(--light);
        }

        .category-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }

        .category-card {
            background: #fff;
            border-radius: var(--radius);
            overflow: hidden;
            border: 1px solid var(--border);
            transition: .2s;
        }

        .category-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow);
        }

        .category-image {
            height: 150px;
            background-size: cover;
            background-position: center;
        }

        .category-content {
            padding: 20px;
        }

        .category-content h3 {
            color: var(--dark);
            margin: 0 0 8px;
            font-size: 20px;
        }

        .category-content p {
            margin: 0 0 12px;
            font-size: 14px;
        }

        .read-more {
            color: var(--primary);
            font-weight: 700;
            font-size: 14px;
        }

        /* =========================
           PRAIAS
        ========================= */

        .beaches {
            background: #fff;
        }

        .region-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 22px;
        }

        .region {
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 25px;
            background: #fff;
        }

        .region h3 {
            margin-top: 0;
            color: var(--primary);
            font-size: 22px;
        }

        .region ul {
            margin: 0;
            padding-left: 20px;
        }

        .region li {
            margin-bottom: 7px;
        }

        .region a {
            color: var(--text);
        }

        .region a:hover {
            color: var(--primary);
            text-decoration: underline;
        }

        .all-beaches {
            margin-top: 25px;
            text-align: center;
        }

        /* =========================
           FEATURED
        ========================= */

        .featured {
            background: var(--light);
        }

        .article-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 25px;
        }

        .article {
            background: #fff;
            border-radius: var(--radius);
            overflow: hidden;
            border: 1px solid var(--border);
            transition: .2s;
        }

        .article:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow);
        }

        .article-image {
            height: 190px;
            background-size: cover;
            background-position: center;
        }

        .article-content {
            padding: 22px;
        }

        .article-tag {
            color: var(--primary);
            font-size: 12px;
            font-weight: 800;
            text-transform: uppercase;
        }

        .article h3 {
            color: var(--dark);
            line-height: 1.3;
            margin: 7px 0 10px;
            font-size: 21px;
        }

        .article p {
            font-size: 14px;
            margin-bottom: 15px;
        }

        /* =========================
           ROUTES
        ========================= */

        .routes {
            background: #fff;
        }

        .route-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 18px;
        }

        .route {
            padding: 25px;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            background: #fff;
        }

        .route strong {
            display: block;
            font-size: 25px;
            color: var(--primary);
            margin-bottom: 5px;
        }

        .route h3 {
            margin: 0 0 10px;
            color: var(--dark);
        }

        .route p {
            font-size: 14px;
            margin: 0;
        }

        /* =========================
           MAP
        ========================= */

        .map-section {
            background: var(--primary);
            color: #fff;
        }

        .map-section .section-header h2 {
            color: #fff;
        }

        .map-box {
            min-height: 330px;
            border-radius: var(--radius);
            background:
                linear-gradient(
                    rgba(0,0,0,.15),
                    rgba(0,0,0,.15)
                ),
                url("https://images.unsplash.com/photo-1470770841072-f978cf4d019e?auto=format&fit=crop&w=1600&q=80")
                center / cover;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 30px;
        }

        .map-box-content {
            background: rgba(0,0,0,.58);
            padding: 25px;
            border-radius: 10px;
            max-width: 500px;
        }

        /* =========================
           HOSPEDAGEM / GASTRONOMIA
        ========================= */

        .two-columns {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 25px;
        }

        .info-card {
            padding: 30px;
            border-radius: var(--radius);
            border: 1px solid var(--border);
            background: #fff;
        }

        .info-card h3 {
            color: var(--primary);
            font-size: 25px;
            margin-top: 0;
        }

        .info-card ul {
            padding-left: 20px;
        }

        /* =========================
           FAQ
        ========================= */

        .faq {
            background: var(--light);
        }

        .faq-list {
            max-width: 850px;
            margin: auto;
        }

        details {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 8px;
            margin-bottom: 12px;
            padding: 18px 22px;
        }

        summary {
            cursor: pointer;
            font-weight: 700;
            color: var(--dark);
        }

        details p {
            margin-bottom: 0;
        }

        /* =========================
           CTA
        ========================= */

        .cta {
            padding: 75px 0;
            text-align: center;
            background:
                linear-gradient(
                    90deg,
                    var(--primary-dark),
                    var(--primary)
                );
            color: #fff;
        }

        .cta h2 {
            font-size: 38px;
            margin: 0 0 15px;
        }

        .cta p {
            max-width: 700px;
            margin: 0 auto 25px;
            font-size: 18px;
        }

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

        footer {
            background: #182329;
            color: #cbd5d8;
            padding: 55px 0 25px;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.5fr 1fr 1fr 1fr;
            gap: 40px;
        }

        footer h3 {
            color: #fff;
            margin-top: 0;
        }

        footer ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        footer li {
            margin-bottom: 8px;
        }

        footer a:hover {
            color: #fff;
        }

        .copyright {
            margin-top: 45px;
            padding-top: 20px;
            border-top: 1px solid rgba(255,255,255,.1);
            font-size: 13px;
            text-align: center;
        }

        /* =========================
           MOBILE
        ========================= */

        @media (max-width: 900px) {

            nav {
                display: none;
            }

            .menu-button {
                display: block;
            }

            .quick-nav-inner {
                grid-template-columns: repeat(3, 1fr);
            }

            .quick-item:nth-child(3) {
                border-right: 0;
            }

            .intro-grid,
            .two-columns {
                grid-template-columns: 1fr;
            }

            .category-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .region-grid,
            .article-grid {
                grid-template-columns: 1fr 1fr;
            }

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

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

        @media (max-width: 600px) {

            .container {
                width: min(100% - 24px, 1180px);
            }

            .topbar-inner {
                justify-content: center;
                text-align: center;
            }

            .topbar-inner span:last-child {
                display: none;
            }

            .hero {
                min-height: 560px;
            }

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

            .hero p {
                font-size: 17px;
            }

            section {
                padding: 50px 0;
            }

            .quick-nav-inner {
                grid-template-columns: repeat(2, 1fr);
            }

            .quick-item {
                border-bottom: 1px solid var(--border);
            }

            .category-grid,
            .region-grid,
            .article-grid,
            .route-grid,
            .footer-grid {
                grid-template-columns: 1fr;
            }

            .header-inner {
                min-height: 65px;
            }

            .logo {
                font-size: 21px;
            }
        }

    </style>

    <!--
        SCHEMA.ORG
        ==============================
        Estrutura de dados para ajudar
        o Google a compreender a página.
    -->

    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebPage",
      "name": "Turismo em Ubatuba",
      "url": "https://turismoubatuba.com.br/turismo-em-ubatuba",
      "description": "Guia completo de turismo em Ubatuba com praias, passeios, trilhas, hospedagem, gastronomia e roteiros.",
      "inLanguage": "pt-BR",
      "isPartOf": {
        "@type": "WebSite",
        "name": "TurismoUbatuba.com.br",
        "url": "https://turismoubatuba.com.br/"
      },
      "about": {
        "@type": "City",
        "name": "Ubatuba",
        "address": {
          "@type": "PostalAddress",
          "addressLocality": "Ubatuba",
          "addressRegion": "SP",
          "addressCountry": "BR"
        }
      }
    }
    </script>

    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [
        {
          "@type": "ListItem",
          "position": 1,
          "name": "Início",
          "item": "https://turismoubatuba.com.br/"
        },
        {
          "@type": "ListItem",
          "position": 2,
          "name": "Turismo em Ubatuba",
          "item": "https://turismoubatuba.com.br/turismo-em-ubatuba"
        }
      ]
    }
    </script>

    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "FAQPage",
      "mainEntity": [
        {
          "@type": "Question",
          "name": "O que fazer em Ubatuba?",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "Ubatuba oferece praias, trilhas, cachoeiras, passeios de barco, mergulho, surf, ecoturismo, gastronomia e atrações culturais."
          }
        },
        {
          "@type": "Question",
          "name": "Quais são as melhores praias de Ubatuba?",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "Ubatuba possui dezenas de praias com características diferentes. Entre as mais conhecidas estão Praia Grande, Itamambuca, Félix, Lagoinha, Fortaleza, Tenório e Praia da Fazenda."
          }
        },
        {
          "@type": "Question",
          "name": "Onde ficar em Ubatuba?",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "A escolha depende do perfil da viagem. O centro e Itaguá oferecem maior concentração de serviços, enquanto regiões próximas às praias podem ser interessantes para quem busca ficar mais próximo da natureza."
          }
        },
        {
          "@type": "Question",
          "name": "O que fazer em Ubatuba em dois dias?",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "Um roteiro de dois dias pode combinar praias, passeio de barco, gastronomia e uma trilha ou atração natural."
          }
        }
      ]
    }