* {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }



        :root {

            /* Colors in HSL */

            --primary: 210 100% 12%;

            --primary-foreground: 0 0% 100%;

            --accent: #68acdb;

            --accent-foreground: 210 100% 12%;

            --background: 0 0% 100%;

            --foreground: 210 100% 12%;

            --muted: 210 20% 96%;

            --muted-foreground: 210 10% 40%;

            --card: 0 0% 100%;

            --card-foreground: 210 100% 12%;

            --destructive: 0 84% 60%;

            --destructive-foreground: 0 0% 100%;

            --border: 210 20% 90%;

            --text-dark: 210 30% 25%;

            

            /* Fonts */

            --font-sans: 'Poppins', sans-serif;

            --font-heading: 'Montserrat', sans-serif;

        }



        body {

            font-family: var(--font-sans);

            color: hsl(var(--foreground));

            background: hsl(var(--background));

            line-height: 1.6;

        }



        .container {

            width: 100%;

            max-width: 1200px;

            margin: 0 auto;

            padding: 0 1rem;

        }



        /* Header */

        header {

            background: hsla(var(--background), 0.95);

            backdrop-filter: blur(8px);

            border-bottom: 1px solid hsl(var(--border));

            position: sticky;

            top: 0;

            z-index: 1000;

        }



        nav {

            display: flex;

            align-items: center;

            justify-content: space-between;

            padding: 0.5rem 1rem;

        }

https://www.ungaretticomex.com.br/

        .logo {

            font-family: var(--font-heading);

            font-size: 1.5rem;

            font-weight: 700;

            color: hsl(var(--primary));

        }



        .nav-links {

            display: none;

            gap: 2rem;

            align-items: center;

        }



        .nav-links a {

            color: hsl(var(--foreground));

            text-decoration: none;

            transition: color 0.3s;

        }



        .nav-links a:hover {

            color: hsl(var(--accent));

        }



        .btn-gradient {

            background: linear-gradient(135deg, hsl(var(--primary)), hsl(210 100% 20%));

            color: hsl(var(--primary-foreground));

            padding: 0.625rem 1.5rem;

            border-radius: 0.5rem;

            border: none;

            font-weight: 600;

            cursor: pointer;

            text-decoration: none;

            display: inline-block;

            transition: transform 0.2s, box-shadow 0.2s;

        }



        .btn-gradient:hover {

            transform: translateY(-2px);

            box-shadow: 0 10px 30px -10px hsla(var(--primary), 0.5);

        }



        @media (min-width: 768px) {

            .nav-links {

                display: flex;

            }

        }



        /* Hero Section */

       .hero{

  min-height: calc(100vh - 80px);

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  padding: 4rem 0;

  background: 

    linear-gradient(rgba(10, 53, 87, 0.5), rgba(10, 53, 87, 0.5)),

    url('https://www.ungaretticomex.com.br/wp-content/uploads/2025/11/banner-ungaretti.png');

  background-size: cover;

  background-position: center;

  color: #fff;

}





        .hero-content {

            position: relative;

            z-index: 2;

            max-width: 900px;

        }



        .hero h1 {

            font-family: var(--font-heading);

            font-size: 3rem;

            font-weight: 800;

            line-height: 1.1;

            margin-bottom: 1.5rem;

        }



        .hero-subtitle {

            font-size: 1.25rem;

            margin-bottom: 2rem;

            opacity: 0.95;

            font-weight: 300;

        }



        .hero-highlights {

            display: flex;

            flex-wrap: wrap;

            gap: 1.5rem;

            margin-bottom: 2.5rem;

        }



        .hero-highlight {

            display: flex;

            align-items: center;

            gap: 0.75rem;

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

            padding: 0.75rem 1.25rem;

            border-radius: 0.5rem;

            backdrop-filter: blur(10px);

            border: 1px solid rgba(255, 255, 255, 0.2);

        }



        .hero-highlight-icon {

            width: 24px;

            height: 24px;

            color: hsl(var(--accent));

        }



        .hero-cta {

            background: #68acdb;

            color: hsl(var(--primary));

            padding: 1rem 2.5rem;

            border-radius: 0.5rem;

            border: none;

            font-weight: 700;

            font-size: 1.125rem;

            cursor: pointer;

            display: inline-flex;

            align-items: center;

            gap: 0.75rem;

            margin-bottom: 3rem;

            transition: all 0.3s;

            text-decoration: none;

        }



        .hero-cta:hover {

            transform: translateY(-2px);

            box-shadow: 0 10px 40px hsla(var(--accent), 0.4);

        }



        .hero-stats {

            display: grid;

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

            gap: 1.5rem;

            margin-top: -50px;

			

        }



        .hero-stat {

            text-align: center;

            padding: 1rem;

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

            border-radius: 0.5rem;

            backdrop-filter: blur(10px);

        }



        .hero-stat-number {

            font-size: 2rem;

            font-weight: 800;

            color: hsl(var(--accent));

            display: block;

            margin-bottom: 0.25rem;

        }



        .hero-stat-label {

            font-size: 0.875rem;

            opacity: 0.9;

        }



        @media (max-width: 768px) {

            .hero h1 {

                font-size: 2rem;

            }

        }



        /* Authority Section */

        .authority {

            padding: 5rem 1rem;

            background: hsl(var(--background));

        }



        .section-title {

            font-family: var(--font-heading);

            font-size: 3rem;

            font-weight: 800;

            text-align: center;

            margin-bottom: 1rem;

            color: hsl(var(--primary));

        }



        .section-subtitle {

            text-align: center;

            font-size: 1.25rem;

            color: hsl(var(--muted-foreground));

            margin-bottom: 3rem;

        }



        .credentials-grid {

            display: grid;

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

            gap: 1.5rem;

            margin-bottom: 3rem;

        }



        .card {

            background: hsl(var(--card));

            border: 1px solid hsl(var(--border));

            border-radius: 0.5rem;

            padding: 1.5rem;

            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

            transition: all 0.3s;

        }



        .card:hover {

            transform: translateY(-4px);

            box-shadow: 0 10px 30px -10px hsla(var(--primary), 0.2);

        }



        .card-icon {

            width: 48px;

            height: 48px;

            background: linear-gradient(135deg, hsla(var(--accent), 0.1), hsla(var(--accent), 0.2));

            border-radius: 0.5rem;

            display: flex;

            align-items: center;

            justify-content: center;

            margin-bottom: 1rem;

            color: hsl(var(--accent));

        }



        .card h3 {

            font-weight: 700;

            margin-bottom: 0.5rem;

            color: hsl(var(--primary));

        }



        .card p {

            color: hsl(var(--muted-foreground));

            font-size: 0.875rem;

        }



        .contact-info {

            display: flex;

            flex-wrap: wrap;

            justify-content: center;

            gap: 2rem;

            margin-bottom: 2rem;

        }



        .contact-item {

            display: flex;

            align-items: center;

            gap: 0.5rem;

            color: hsl(var(--primary));

            font-weight: 600;

        }



        .quote-card {

            background: linear-gradient(135deg, hsl(var(--primary)), hsl(210 100% 20%));

            color: white;

            padding: 2.5rem;

            border-radius: 0.5rem;

            text-align: center;

        }



        .quote-card blockquote {

            font-size: 1.5rem;

            font-style: italic;

            line-height: 1.6;

        }



        /* Problems Section */

        .problems {

            padding: 5rem 1rem;

            background: hsl(var(--background));

        }



        .gradient-text {

  background: linear-gradient(90deg, #346282, #68acdb, #94c4e7);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  display: block;

}



        .problems-grid {

            display: grid;

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

            gap: 1.5rem;

            margin-bottom: 3rem;

        }



        .problem-card {

            border: 1px solid hsla(var(--destructive), 0.2);

            background: hsl(var(--card));

            border-radius: 0.5rem;

            padding: 1.5rem;

            transition: all 0.3s;

        }



        .problem-card:hover {

            border-color: hsla(var(--destructive), 0.4);

        }



        .problem-content {

            display: flex;

            gap: 1rem;

        }



        .problem-icon {

            flex-shrink: 0;

            width: 48px;

            height: 48px;

            background: hsla(var(--destructive), 0.1);

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            color: hsl(var(--destructive));

            transition: background 0.3s;

        }



        .problem-card:hover .problem-icon {

            background: hsla(var(--destructive), 0.2);

        }



        .problem-text {

            flex: 1;

        }



        .problem-text strong {

            display: block;

            margin-bottom: 0.5rem;

            color: hsl(var(--text-dark));

        }



        .problem-detail {

            color: hsl(var(--destructive));

            font-size: 0.875rem;

            font-weight: 600;

        }



        .ocean-card {

            background: linear-gradient(135deg, hsl(var(--primary)), hsl(210 100% 20%));

            color: white;

            padding: 2.5rem;

            border-radius: 0.5rem;

        }



        .ocean-card blockquote {

            font-size: 1.5rem;

            font-style: italic;

            line-height: 1.6;

        }



        /* Solutions Section */

        .solutions {

            padding: 5rem 1rem;

            background: linear-gradient(135deg, hsl(var(--primary)), hsl(210 100% 20%));

            color: white;

        }



        .solutions .section-title {

            color: white;

        }



        .solutions .section-subtitle {

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

        }



        .solutions-grid {

            display: grid;

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

            gap: 2rem;

        }



        .solution-card {

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

            border: 1px solid rgba(255, 255, 255, 0.1);

            border-radius: 0.5rem;

            padding: 2rem;

            backdrop-filter: blur(10px);

            transition: all 0.3s;

        }



        .solution-card:hover {

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

            transform: translateY(-4px);

        }



        .solution-icon {

            width: 56px;

            height: 56px;

            background: hsla(var(--accent), 0.2);

            border-radius: 0.5rem;

            display: flex;

            align-items: center;

            justify-content: center;

            margin-bottom: 1.5rem;

            color: hsl(var(--accent));

        }



        .solution-card h3 {

            font-size: 1.5rem;

            font-weight: 700;

            margin-bottom: 1rem;

        }



        .solution-card > p {

            margin-bottom: 1.5rem;

            opacity: 0.9;

        }



        .benefits-list {

            list-style: none;

            display: flex;

            flex-direction: column;

            gap: 0.75rem;

        }



        .benefits-list li {

            display: flex;

            align-items: flex-start;

            gap: 0.5rem;

        }



        .check-icon {

            width: 20px;

            height: 20px;

            color: hsl(var(--accent));

            flex-shrink: 0;

            margin-top: 2px;

        }



        /* Mission Section */

        .mission {

            padding: 5rem 1rem;

            background: hsl(var(--background));

        }



        .mission-grid {

            display: grid;

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

            gap: 2rem;

        }



        .mission-card {

            text-align: center;

        }



        .mission-card-title {

            font-size: 1.25rem;

            font-weight: 700;

            color: #68acdb;

            margin-bottom: 1rem;

        }



        /* Differentials Section */

        .differentials {

            padding: 5rem 1rem;

            background: linear-gradient(135deg, hsl(var(--primary)), hsl(210 100% 20%));

            color: white;

        }



        .differentials .section-title {

            color: white;

        }



        .differentials .section-subtitle {

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

        }



        .differentials-grid {

            display: grid;

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

            gap: 2rem;

        }



        .differential-card {

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

            border: 1px solid rgba(255, 255, 255, 0.1);

            border-radius: 0.5rem;

            padding: 2rem;

            backdrop-filter: blur(10px);

        }



        .differential-icon {

            width: 56px;

            height: 56px;

            background: hsla(var(--accent), 0.2);

            border-radius: 0.5rem;

            display: flex;

            align-items: center;

            justify-content: center;

            margin-bottom: 1.5rem;

            color: hsl(var(--accent));

        }



        .differential-card h3 {

            font-size: 1.5rem;

            font-weight: 700;

            margin-bottom: 1rem;

        }



        .differential-card > p {

            margin-bottom: 1rem;

            opacity: 0.9;

        }



        .differential-detail {

            color: hsl(var(--accent));

            font-weight: 600;

            font-size: 0.875rem;

        }



        /* Quote Form Section */

        .quote-form-section {

            padding: 5rem 1rem;

            background: hsl(var(--muted));

        }



        .form-card {

            max-width: 600px;

            margin: 0 auto 2rem;

            background: hsl(var(--card));

            border: 1px solid hsl(var(--border));

            border-radius: 0.5rem;

            padding: 2rem;

        }



        .form-card h3 {

            font-size: 1.5rem;

            font-weight: 700;

            margin-bottom: 1.5rem;

            color: hsl(var(--primary));

        }



        .form-group {

            margin-bottom: 1.5rem;

        }



        .form-group label {

            display: block;

            margin-bottom: 0.5rem;

            font-weight: 600;

            color: hsl(var(--foreground));

        }



        .form-group input,

        .form-group select,

        .form-group textarea {

            width: 100%;

            padding: 0.75rem;

            border: 1px solid hsl(var(--border));

            border-radius: 0.375rem;

            font-family: var(--font-sans);

            font-size: 1rem;

            transition: border-color 0.2s;

        }



        .form-group input:focus,

        .form-group select:focus,

        .form-group textarea:focus {

            outline: none;

            border-color: hsl(var(--accent));

        }



        .form-group textarea {

            min-height: 100px;

            resize: vertical;

        }



        .btn-submit {

            width: 100%;

            background: hsl(var(--accent));

            color: hsl(var(--primary));

            padding: 1rem;

            border: none;

            border-radius: 0.375rem;

            font-weight: 700;

            font-size: 1rem;

            cursor: pointer;

            display: flex;

            align-items: center;

            justify-content: center;

            gap: 0.5rem;

            margin-bottom: 1rem;

            transition: all 0.3s;

        }



        .btn-submit:hover {

            transform: translateY(-2px);

            box-shadow: 0 10px 40px hsla(var(--accent), 0.4);

        }



        .contact-buttons {

            display: flex;

            gap: 1rem;

            max-width: 600px;

            margin: 0 auto;

        }



        .btn-whatsapp {

            flex: 1;

            background: #25D366;

            color: white;

            padding: 1rem;

            border: none;

            border-radius: 0.375rem;

            font-weight: 700;

            cursor: pointer;

            display: flex;

            align-items: center;

            justify-content: center;

            gap: 0.5rem;

            text-decoration: none;

            transition: all 0.3s;

        }



        .btn-whatsapp:hover {

            transform: translateY(-2px);

            box-shadow: 0 10px 40px rgba(37, 211, 102, 0.4);

        }



        .btn-phone {

            flex: 1;

            background: hsl(var(--primary));

            color: white;

            padding: 1rem;

            border: none;

            border-radius: 0.375rem;

            font-weight: 700;

            cursor: pointer;

            display: flex;

            align-items: center;

            justify-content: center;

            gap: 0.5rem;

            text-decoration: none;

            transition: all 0.3s;

        }



        .btn-phone:hover {

            transform: translateY(-2px);

            box-shadow: 0 10px 40px hsla(var(--primary), 0.4);

        }



        /* Footer */

        footer {

            background: hsl(var(--primary));

            color: white;

            padding: 3rem 1rem 1.5rem;

        }



        .footer-content {

            display: grid;

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

            gap: 2rem;

            margin-bottom: 2rem;

        }



        .footer-section h4 {

            font-family: var(--font-heading);

            font-size: 1.25rem;

            margin-bottom: 1rem;

        }



        .footer-logo {

            background: linear-gradient(135deg, hsl(var(--accent)), hsl(174 72% 40%));

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;

            background-clip: text;

        }



        .footer-description {

            margin-bottom: 1rem;

            opacity: 0.9;

            font-size: 0.875rem;

        }



        .social-links {

            display: flex;

            gap: 1rem;

        }



        .social-link {

            width: 40px;

            height: 40px;

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

            border-radius: 0.375rem;

            display: flex;

            align-items: center;

            justify-content: center;

            color: white;

            text-decoration: none;

            transition: all 0.3s;

        }



        .social-link:hover {

            background: hsl(var(--accent));

            color: hsl(var(--primary));

        }



        .footer-links {

            list-style: none;

        }



        .footer-links li {

            margin-bottom: 0.75rem;

        }



        .footer-links a {

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

            text-decoration: none;

            transition: color 0.3s;

        }



        .footer-links a:hover {

            color: hsl(var(--accent));

        }



        .contact-item-footer {

            display: flex;

            align-items: flex-start;

            gap: 0.5rem;

            margin-bottom: 0.75rem;

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

            font-size: 0.875rem;

        }



        .footer-bottom {

            text-align: center;

            padding-top: 2rem;

            border-top: 1px solid rgba(255, 255, 255, 0.1);

            opacity: 0.8;

            font-size: 0.875rem;

        }



        /* Floating WhatsApp */

        .floating-whatsapp {

            position: fixed;

            bottom: 2rem;

            right: 2rem;

            width: 60px;

            height: 60px;

            background: #25D366;

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);

            cursor: pointer;

            z-index: 999;

            transition: all 0.3s;

            text-decoration: none;

            color: white;

        }



        .floating-whatsapp:hover {

            transform: scale(1.1);

            box-shadow: 0 6px 30px rgba(37, 211, 102, 0.6);

        }



        /* SVG Icons */

        .icon {

            width: 24px;

            height: 24px;

            stroke: #68acdb;

            fill: none;

            stroke-width: 2;

            stroke-linecap: round;

            stroke-linejoin: round;

        }



        .icon-sm {

            width: 20px;

            height: 20px;

        }



        .icon-lg {

            width: 32px;

            height: 32px;

        }



		.whatsapp img {

    position: fixed;

    z-index: 8;

    bottom: 20px;

    right: 50px;

    width: 50px;

    height: 50px;

    opacity: 0.7;

    transition: 

ease .8s all;

}







.hero-stats {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 2rem;

  max-width: 1200px;

  margin: 3rem auto;

  padding: 0 1rem;

}



.hero-stat {

  background: #fff;

  border-radius: 1.25rem;

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);

  text-align: center;

  padding: 2.5rem 1.5rem;

  transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.hero-stat:hover {

  transform: translateY(-6px);

  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);

}



.hero-stat svg {

  width: 48px;

  height: 48px;

  color: #06b6d4;

  margin-bottom: 1rem;

  transition: color 0.3s ease, transform 0.3s ease;

}



.hero-stat:hover svg {

  color: #0ea5e9;

  transform: scale(1.1);

}



.hero-stat-number {

  display: flex;

  justify-content: center;

  align-items: baseline;

  gap: 0.25rem;

  font-size: 2.2rem;

  font-weight: 700;

  color: #0f172a;

}



.hero-stat-symbol {

  font-size: 1.5rem;

  color: #0f172a;

}



.hero-stat-label {

  display: block;

  color: #475569;

  font-size: 1rem;

  margin-top: 0.25rem;

}



/* Responsividade */

@media (max-width: 992px) {

  .hero-stats {

    grid-template-columns: repeat(2, 1fr);

  }

}

@media (max-width: 600px) {

  .hero-stats {

    grid-template-columns: 1fr;

  }

}





/* Define a cor azul nos ícones grandes e nos de check */

.solution-icon svg,

.benefits-list .check-icon {

  fill: #68acdb;

  stroke: #68acdb;

}



/* Caso queira deixar os caminhos apenas com contorno (sem preenchimento sólido) */

.solution-icon svg path,

.solution-icon svg polyline,

.benefits-list .check-icon polyline {

  fill: none;

  stroke: #68acdb;

  stroke-width: 2;

  stroke-linecap: round;

  stroke-linejoin: round;

}

/* Ícones das seções de soluções e do footer */

.solution-icon svg,

.benefits-list .check-icon,

.footer-section .icon-sm {

  fill: none;

  stroke: #68acdb;

  stroke-width: 2;

  stroke-linecap: round;

  stroke-linejoin: round;

}



/* Caso algum SVG precise de preenchimento */

.footer-section .icon-sm path[fill],

.footer-section .icon-sm circle[fill] {

  fill: #68acdb;

  stroke: none;

}

.contact-item-footer {

  display: flex;

  align-items: flex-start;

  gap: 10px;

  color: #fff;

}



.contact-item-footer svg {

  flex-shrink: 0;

  width: 20px;

  height: 20px;

  fill: #68acdb; /* cor do ícone */

  margin-top: 3px; /* centraliza melhor com o texto */

}



.contact-item-footer div {

  flex: 1; /* faz o texto ocupar o espaço restante */

  line-height: 1.4;

}