:root {

  /* Burdeos clásico */
  --primary: #6b2f2f;
  --primary-dark: #4a1f1f;

  /* Oro antiguo */
  --gold: #b08d57;
  --gold-light: #d6b67a;
  --gold-dark: #7c5f2c;

  /* Madera nogal */
  --dark: #2d241d;
  --dark-2: #1f1813;
  --black: #15110d;

  /* Neutros elegantes */
  --gray: #6e6257;
  --gray-light: #9f9488;

  /* Papel antiguo */
  --light: #f5f0e8;
  --white: #fffdf8;

  /* Verde olivo */
  --green: #556b2f;
  --green-dark: #405221;

  --shadow: 0 10px 35px rgba(43,30,18,.15);

  --radius: 12px;
}
/*logos footer*/
/* =====================================================
   LOGOS PIE DE PÁGINA (FOOTER LOGOS)
====================================================== */
.footer-logos {
  margin-bottom: 25px;
  padding-bottom: 25px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-logos-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #888;
  margin-bottom: 15px;
  font-weight: 700;
}

.footer-logos .logos-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 25px;
  padding: 0;
}

/* Tarjeta contenedora con fondo blanco/claro para legibilidad de los logos */
.footer-logos .logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  padding: 10px 18px;
  border-radius: 8px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  min-width: 130px;
  height: 55px;
}

.footer-logos .logo-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(255, 255, 255, 0.15);
}

.footer-logos .logo-item img {
  max-height: 38px;
  max-width: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
}

    /*=============Logos empresas socias*/
    /* Contenedor principal para organizar la fila */
.logos-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px; /* Distancia horizontal entre cada logo */
  padding: 20px 0;
}

/* Quitar fondos, sombras y bordes de tarjeta */
.company-tag {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Redimensionar las imágenes */
.company-tag img {
  max-height: 35px; /* Controla el alto de los logos (ajusta según prefieras) */
  width: auto;       /* Mantiene la proporción original */
  object-fit: contain;
}

.gold-medal {
  font-size: 23px;
  line-height: 1;
}

    /* =====================================================
       RESET
    ====================================================== */

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
    }
    body {

      font-family: "Montserrat", sans-serif;

      color: var(--dark);

      background: #fcfaf5;
        background-image:

    radial-gradient(
      circle at 20% 20%,
      rgba(176,141,87,.04) 0,
      transparent 25%
    ),

    radial-gradient(
      circle at 80% 60%,
      rgba(107,47,47,.03) 0,
      transparent 25%
    );

      line-height: 1.6;

      width: 100%;

      overflow-x: hidden;

    }

    body.lightbox-open {
      overflow: hidden;
    }
    .section-heading h2{
    position:relative;
    display:inline-block;
    padding-bottom:18px;
}

.section-heading h2::after{

    content:"";

    position:absolute;

    bottom:0;
    left:50%;

    transform:translateX(-50%);

    width:120px;
    height:2px;

    background:
    linear-gradient(
        90deg,
        transparent,
        #b08d57,
        transparent
    );

}.gold-section,
.experience,
.categories{
    position:relative;
    overflow:hidden;
}.gold-section::before,
.experience::before,
.categories::before{

    content:"";

    position:absolute;

    width:600px;
    height:600px;

    top:-200px;
    right:-250px;

    border:1px solid rgba(176,141,87,.10);

    border-radius:50%;

}.gold-section::after,
.experience::after,
.categories::after{

    content:"";

    position:absolute;

    width:450px;
    height:450px;

    top:-120px;
    right:-170px;

    border:1px solid rgba(176,141,87,.06);

    border-radius:50%;

}.benefit,
.experience-card,
.company-card{

    background:#fffdf8;

    border:1px solid rgba(176,141,87,.18);

}
.gallery-item{

    border:5px solid #f2ebde;

    box-shadow:
        0 5px 12px rgba(0,0,0,.08),
        inset 0 0 0 1px rgba(176,141,87,.2);

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

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

    button,
    input,
    textarea,
    select {
      font-family: inherit;
    }


    /* =====================================================
       CONTAINER
    ====================================================== */

    .container {

      width: min(1150px, calc(100% - 40px));

      margin: 0 auto;

    }


    /* =====================================================
       TOP BAR
    ====================================================== */

    .topbar {

      background: #1f1813;

      color: #fff;

      font-size: 14px;

      padding: 8px 0;

    }

    .topbar-content {

      display: flex;

      justify-content: space-between;

      align-items: center;

      gap: 20px;

    }

    .topbar a {

      color: #fff;

      transition: .2s;

      font-weight: 700;

    }

    .topbar a:hover {
      color: var(--green);
    }


    /* =====================================================
       NAVBAR
    ====================================================== */

    .navbar {

      background: #fff;

      border-bottom: 1px solid #eee;

      position: sticky;

      top: 0;

      z-index: 1000;

    }

    .nav-content {

      min-height: 72px;

      display: flex;

      align-items: center;

      justify-content: space-between;

      gap: 30px;

    }

    .logo { content:"✦";

      font-size: 27px;

      font-weight: 800;

      color: var(--primary);

      letter-spacing: -1.5px;

      white-space: nowrap;

    }

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

    .nav-menu {

      display: flex;

      list-style: none;

      gap: 18px;

      align-items: center;

    }

    .nav-menu a {

      font-size: 11px;

      font-weight: 800;

      text-transform: uppercase;

      transition: .2s;

    }

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

    .nav-button {

      background: var(--primary);

      color: white !important;

      padding: 11px 19px;

      border-radius: 5px;

    }

    .nav-button:hover {
      background: var(--primary-dark);
    }


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

    .hero {

      min-height: 570px;

      position: relative;

      display: flex;

      align-items: center;

      background:

        linear-gradient(
          90deg,
          rgba(0, 0, 0, .86),
          rgba(0, 0, 0, .52),
          rgba(0, 0, 0, .18)
        ),

        url("../img/fondoo.jpeg")

        center / cover no-repeat;

      color: white;

    }

    .hero-content {

      max-width: 760px;

      padding: 65px 0;

    }
    .hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    repeating-linear-gradient(
        45deg,
        transparent,
        transparent 30px,
        rgba(255,255,255,.02) 31px,
        rgba(255,255,255,.02) 32px
    );

}


    .hero-tag {

      display: inline-block;

      background: var(--primary);

      padding: 8px 15px;

      border-radius: 4px;

      font-size: 12px;

      font-weight: 800;

      text-transform: uppercase;

      margin-bottom: 18px;

    }

    .hero h1 {

      font-size: clamp(40px, 6vw, 70px);

      line-height: 1.03;

      font-weight: 800;

      text-transform: uppercase;

      margin-bottom: 22px;

    }

    .hero h1 span {
      color: #ff3139;
    }

    .hero p {

      max-width: 680px;

      font-size: 18px;

      margin-bottom: 28px;

      color: #eee;

    }

    .buttons {

      display: flex;

      flex-wrap: wrap;

      gap: 14px;

    }


    /* =====================================================
       BUTTONS
    ====================================================== */

    .btn {

      display: inline-flex;

      align-items: center;

      justify-content: center;

      padding: 14px 24px;

      border-radius: 5px;

      font-weight: 800;

      font-size: 14px;

      transition: .25s;

      cursor: pointer;

    }

    .btn-primary {

      background: var(--primary);

      color: #fff;

      border: 0;

    }

    .btn-primary:hover {

      background: var(--primary-dark);

      transform: translateY(-2px);

    }

    .btn-whatsapp {

      background: var(--green);

      color: #fff;

    }

    .btn-whatsapp:hover {

      background: var(--green-dark);

      transform: translateY(-2px);

    }

    .btn-outline {

      border: 2px solid #fff;

      color: #fff;

    }

    .btn-outline:hover {

      background: #fff;

      color: #111;

    }

    .btn-gold {

      background:

        linear-gradient(
          135deg,
          var(--gold-dark),
          var(--gold),
          var(--gold-light)
        );

      color: #111;

      font-weight: 800;

      box-shadow:
        0 8px 25px rgba(212, 175, 55, .18);

    }

    .btn-gold:hover {

      transform: translateY(-2px);

      box-shadow:
        0 12px 30px rgba(212, 175, 55, .3);

    }


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

    .stats {

      background: var(--primary);

      color: #fff;

    }

    .stats-grid {

      display: grid;

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

    }

    .stat {

      text-align: center;

      padding: 22px 15px;

      border-right:
        1px solid rgba(255, 255, 255, .25);

    }

    .stat:last-child {
      border-right: 0;
    }

    .stat strong {

      display: block;

      font-size: 27px;

      font-weight: 800;

    }

    .stat span {

      font-size: 12px;

      text-transform: uppercase;

      font-weight: 600;

    }


    /* =====================================================
       GENERAL SECTIONS
    ====================================================== */

    section {
      padding: 55px 0;
    }

    .section-heading {

      text-align: center;

      max-width: 750px;

      margin: 0 auto 35px;

    }

    .section-heading .small-title {

      color: var(--primary);

      font-weight: 800;

      font-size: 13px;

      text-transform: uppercase;

      letter-spacing: 1px;

      margin-bottom: 8px;

    }

    .section-heading h2 {

      font-size: clamp(30px, 4vw, 44px);

      line-height: 1.15;

      margin-bottom: 12px;

      font-weight: 800;

    }

    .section-heading p {
      color: var(--gray);
    }


    /* =====================================================
       BENEFITS
    ====================================================== */

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

    .benefits-grid {

      display: grid;

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

      gap: 20px;

    }

    .benefit {

      background: white;

      padding: 30px 25px;

      border-radius: var(--radius);

      box-shadow: var(--shadow);

      text-align: center;

      transition: .3s;

    }

    .benefit:hover {
      transform: translateY(-6px);
    }

    .icon {

      width: 65px;

      height: 65px;

      margin: 0 auto 16px;

      border-radius: 50%;

      display: grid;

      place-items: center;

      background: #fff0f1;

      color: var(--primary);

      font-size: 28px;

    }

    .benefit h3 {

      margin-bottom: 8px;

      font-size: 19px;

    }

    .benefit p {

      color: var(--gray);

      font-size: 14px;

    }


    /* =====================================================
       SERVICES
    ====================================================== */

    .services-grid {

      display: grid;

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

      gap: 20px;

    }

    .service {

      min-height: 250px;

      padding: 28px;

      border-radius: var(--radius);

      background: #111;

      color: #fff;

      position: relative;

      overflow: hidden;

      transition: .3s;

      display: flex;

      flex-direction: column;

      justify-content: flex-end;

      background-size: cover;

      background-position: center;

      isolation: isolate;

    }

    /*
       Fondo oscuro para que el texto
       siempre sea legible
    */

    .service::before {

      content: "";

      position: absolute;

      inset: 0;

      background:
        linear-gradient(
          180deg,
          rgba(0,0,0,.20),
          rgba(0,0,0,.88)
        );

      z-index: -1;

    }

    .service::after {

      content: "";

      position: absolute;

      width: 90px;

      height: 90px;

      background: var(--primary);

      border-radius: 50%;

      right: -45px;

      bottom: -45px;

      opacity: .8;

      z-index: -1;

    }

    .service:hover {
      transform: translateY(-5px);
    }

    .service-number {

      color: #ff3139;

      font-weight: 800;

      font-size: 14px;

      margin-bottom: 8px;

    }

    .service h3 {

      font-size: 21px;

      margin-bottom: 8px;

    }

    .service p {

      color: #eee;

      font-size: 13px;

      max-width: 330px;

    }

    .service-metal-icon {

      font-size: 28px;

      margin-bottom: 5px;

    }


    /* =====================================================
       IMÁGENES DE SERVICIOS
    ====================================================== */

    .service-1 {

      background-image:
        url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRnGgh7D5ZSVjn2KbYEmsCUcVrmI4f1mCGY5d7ox3bKzg&s=10");

    }

    .service-2 {

      background-image:
        url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRD9eatfXseme34KTmmwyJ0Yh77BS-zQCHTfYRZV9v_Kg&s=10");

    }

    .service-3 {

      background-image:
        url("https://antiguedadeselportal.com/wp-content/uploads/2022/12/definicion-de-antiguo-y-moderno.jpg");

    }

    .service-4 {

      background-image:
        url("../img/pesaje_objetos_metalicos_antiguos_bascula.jpg");

    }

    .service-5 {

      background-image:
        url("../img/recojo.jpeg");

    }

    .service-6 {

      background-image:
        url("https://todopmp.com/wp-content/uploads/2018/03/acuerdos-640x410.jpg");

    }


    /* =====================================================
       EXPERIENCIA
    ====================================================== */

    .experience {
      background: #fff;
    }

    .experience-grid {

      display: grid;

      grid-template-columns: 1fr 1fr;

      gap: 22px;

      align-items: stretch;

    }

    .experience-card {

      border-radius: var(--radius);

      padding: 32px 30px;

      box-shadow: var(--shadow);

      border: 1px solid #eee;

      background: #fff;

      transition: .3s;

    }

    .experience-card:hover {
      transform: translateY(-5px);
    }

    .experience-icon {

      width: 65px;

      height: 65px;

      display: grid;

      place-items: center;

      border-radius: 50%;

      background: #fff0f1;

      color: var(--primary);

      font-size: 30px;

      margin-bottom: 16px;

    }

    .experience-card h3 {

      font-size: 24px;

      margin-bottom: 12px;

      font-weight: 800;

    }

    .experience-card p {

      color: var(--gray);

      font-size: 14px;

      margin-bottom: 18px;

    }

    .experience-list {

      display: grid;

      gap: 9px;

    }

    .experience-list div {

      font-size: 14px;

      font-weight: 600;

      color: #333;

    }

    .international-card {

      background:
        linear-gradient(
          145deg,
          #111,
          #1d1d1d
        );

      color: #fff;

      border:
        1px solid
        rgba(212, 175, 55, .35);

    }

    .international-card h3 {
      color: #fff;
    }

    .international-card p {
      color: #ccc;
    }

    .international-card .experience-icon {

      background:
        rgba(212, 175, 55, .12);

    }


    /* =====================================================
       EMPRESAS
    ====================================================== */

    .company-card {

      margin-top: 22px;

      padding: 30px;

      background: var(--light);

      border-radius: var(--radius);

      text-align: center;

    }

    .company-card h3 {

      font-size: 23px;

      margin-bottom: 8px;

    }

    .company-card > p {

      color: var(--gray);

      margin-bottom: 20px;

      font-size: 14px;

    }

    .company-list {

      display: grid;

      grid-template-columns: repeat(3, minmax(0, 1fr));

      gap: 14px;

    }

    .company-tag {

      background: #fff;

      border: 1px solid #ddd;

      padding: 18px;

      border-radius: 8px;

      font-size: 14px;

      font-weight: 700;

      box-shadow:
        0 4px 15px rgba(0,0,0,.05);

      transition: .25s;

    }

    .company-tag:hover {

      transform: translateY(-3px);

      border-color: var(--primary);

    }

    .company-tag small {

      display: block;

      color: var(--gray);

      font-size: 11px;

      margin-top: 5px;

      font-weight: 500;

    }


    /* =====================================================
       GOLD / SILVER
    ====================================================== */

    .gold-section {

      background:

        radial-gradient(
          circle at 80% 20%,
          rgba(212, 175, 55, .15),
          transparent 35%
        ),

        #111;

      color: #fff;

    }

    .gold-grid {

      display: grid;

      grid-template-columns: 1.2fr .8fr;

      gap: 50px;

      align-items: center;

    }

    .gold-content .small-title {

      color: var(--gold);

      font-size: 13px;

      font-weight: 800;

      letter-spacing: 1px;

      margin-bottom: 10px;

    }

    .gold-content h2 {

      font-size: clamp(35px, 5vw, 55px);

      line-height: 1.1;

      margin-bottom: 18px;

      font-weight: 800;

    }

    .gold-content h2 span {
      color: var(--gold);
    }

    .gold-content p {

      color: #ccc;

      max-width: 650px;

      margin-bottom: 22px;

    }

    .gold-list {

      display: grid;

      grid-template-columns: 1fr 1fr;

      gap: 10px;

      margin-bottom: 25px;

    }

    .gold-list div {

      color: #eee;

      font-size: 14px;

    }

    .gold-card {

      background:

        linear-gradient(
          145deg,
          #29210c,
          #111
        );

      border:
        1px solid
        rgba(212, 175, 55, .4);

      border-radius: 15px;

      padding: 38px 30px;

      text-align: center;

      box-shadow:
        0 20px 50px rgba(0, 0, 0, .3);

    }

    .gold-card-icon {

      font-size: 60px;

      margin-bottom: 12px;

    }

    .gold-card h3 {

      font-size: 26px;

      margin-bottom: 10px;

    }

    .gold-card p {

      color: #ccc;

      font-size: 14px;

      margin-bottom: 20px;

    }

    .gold-card-price {

      color: var(--gold);

      font-size: 13px;

      font-weight: 800;

      letter-spacing: 2px;

      margin-bottom: 22px;

    }


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

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

    .category-grid {

      display: grid;

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

      gap: 15px;

    }

    .category {

      height: 175px;

      border-radius: var(--radius);

      overflow: hidden;

      position: relative;

      display: flex;

      align-items: flex-end;

      background-size: cover;

      background-position: center;

      transition: .3s;

    }

    .category:hover {
      transform: translateY(-5px);
    }

    .category::before {

      content: "";

      position: absolute;

      inset: 0;

      background:
        linear-gradient(
          transparent,
          rgba(0, 0, 0, .88)
        );

    }

    .category h3 {

      position: relative;

      color: white;

      padding: 18px;

      font-size: 16px;

      z-index: 1;

    }


    /* =====================================================
       CATEGORY IMAGES
    ====================================================== */

    .cat1 {
      background-image:
        url("../img/IMG_20240212_160714.jpeg");
    }

    .cat2 {
      background-image:
        url("https://images.unsplash.com/photo-1586023492125-27b2c045efd7?auto=format&fit=crop&w=700&q=80");
    }

    .cat3 {
      background-image:
        url("https://images.unsplash.com/photo-1577083552431-6e5fd01aa342?auto=format&fit=crop&w=700&q=80");
    }

    .cat4 {
      background-image:
        url("../img/IMG_20240307_104509.jpeg");
    }

    .cat5 {
      background-image:
        url("https://images.unsplash.com/photo-1495446815901-a7297e633e8d?auto=format&fit=crop&w=700&q=80");
    }

    .cat6 {
      background-image:
        url("https://images.unsplash.com/photo-1593642702821-c8da6771f0c6?auto=format&fit=crop&w=700&q=80");
    }

    .cat7 {
      background-image:
        url("../img/remate.jpeg");
    }

    .cat8 {
      background-image:
        url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSKCAihsVdJi4AZR-kL8HEy-2wj5TufIT-8PuEyXIYmlzQOKBu4LO-HaDKu&s=10");
    }

    .cat9 {
      background-image:
        url("../img/bascula_digital_pesando_joyas_de_oro.jpg");
    }

    .cat10 {
      background-image:
        url("../img/objetos_plata_dinero_balanza_digital.jpg");
    }


    /* =====================================================
       GALLERY
    ====================================================== */

    .gallery-wrapper {
      position: relative;
    }

    .gallery {

      display: grid;

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

      gap: 10px;

    }

    .gallery-item {

      height: 210px;

      overflow: hidden;

      border-radius: 8px;

      cursor: pointer;

      position: relative;

      background: #eee;

    }

    .gallery-item img {

      width: 100%;

      height: 100%;

      object-fit: cover;

      transition:
        transform .4s,
        filter .3s;

    }

    .gallery-item::after {

      position: absolute;

      inset: 0;

      display: grid;

      place-items: center;

      font-size: 30px;

      background: rgba(0,0,0,.30);

      opacity: 0;

      transition: .3s;

      color: #fff;

    }

    .gallery-item:hover img {

      transform: scale(1.08);

      filter: brightness(.8);

    }

    .gallery-item:hover::after {
      opacity: 1;
    }


    /* =====================================================
       CONTROLES GALERÍA
    ====================================================== */

    .gallery-controls {

      display: flex;

      justify-content: center;

      align-items: center;

      gap: 18px;

      margin-top: 22px;

    }

    .gallery-btn {

      width: 45px;

      height: 45px;

      border: none;

      border-radius: 50%;

      background: var(--dark);

      color: #fff;

      font-size: 27px;

      line-height: 1;

      cursor: pointer;

      display: grid;

      place-items: center;

      transition: .25s;

    }

    .gallery-btn:hover {

      background: var(--primary);

      transform: scale(1.08);

    }

    .gallery-btn:disabled {

      opacity: .35;

      cursor: not-allowed;

      transform: none;

    }

    .gallery-page {

      min-width: 100px;

      text-align: center;

      font-size: 13px;

      font-weight: 700;

      color: var(--gray);

    }


    /* =====================================================
       LIGHTBOX
    ====================================================== */

    .lightbox {

      position: fixed;

      inset: 0;

      background: rgba(0, 0, 0, .94);

      z-index: 5000;

      display: none;

      align-items: center;

      justify-content: center;

      padding: 30px 80px;

    }

    .lightbox.active {
      display: flex;
    }

    .lightbox-image {

      max-width: min(1100px, 90vw);

      max-height: 82vh;

      width: auto;

      height: auto;

      object-fit: contain;

      border-radius: 8px;

      box-shadow:
        0 20px 70px rgba(0,0,0,.6);

      user-select: none;

    }

    .lightbox-close {

      position: absolute;

      top: 20px;

      right: 25px;

      width: 48px;

      height: 48px;

      border: 0;

      border-radius: 50%;

      background: rgba(255,255,255,.12);

      color: #fff;

      font-size: 32px;

      cursor: pointer;

      z-index: 2;

      transition: .2s;

    }

    .lightbox-close:hover {
      background: var(--primary);
    }

    .lightbox-prev,
    .lightbox-next {

      position: absolute;

      top: 50%;

      transform: translateY(-50%);

      width: 55px;

      height: 55px;

      border: none;

      border-radius: 50%;

      background: rgba(255,255,255,.14);

      color: white;

      font-size: 35px;

      cursor: pointer;

      display: grid;

      place-items: center;

      transition: .2s;

    }

    .lightbox-prev {
      left: 20px;
    }

    .lightbox-next {
      right: 20px;
    }

    .lightbox-prev:hover,
    .lightbox-next:hover {
      background: var(--primary);
    }

    .lightbox-counter {

      position: absolute;

      bottom: 20px;

      left: 50%;

      transform: translateX(-50%);

      color: #fff;

      font-size: 13px;

      font-weight: 700;

      background: rgba(0,0,0,.5);

      padding: 7px 13px;

      border-radius: 20px;

    }


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

    .cta {

      padding: 60px 0;

      background:

        linear-gradient(
          90deg,
          rgba(170, 0, 0, .92),
          rgba(230, 27, 35, .88)
        ),

        url("https://images.unsplash.com/photo-1493663284031-b7e3aefcae8e?auto=format&fit=crop&w=1800&q=80")

        center / cover;

      color: #fff;

    }

    .cta-content {

      display: flex;

      justify-content: space-between;

      align-items: center;

      gap: 35px;

    }

    .cta h2 {

      font-size: clamp(30px, 4vw, 45px);

      line-height: 1.1;

      margin-bottom: 8px;

    }

    .cta p {
      color: #ffeaea;
    }


    /* =====================================================
       CONTACT
    ====================================================== */

    .contact {

      background: #111;

      color: white;

    }

    .contact-grid {

      display: grid;

      grid-template-columns: 1fr 1fr;

      gap: 50px;

      align-items: start;

    }

    .contact h2 {

      font-size: 38px;

      margin-bottom: 15px;

    }

    .contact-intro {

      color: #bbb;

      margin-bottom: 25px;

    }

    .contact-item {

      display: flex;

      gap: 15px;

      margin-bottom: 17px;

    }

    .contact-icon {

      color: var(--primary);

      font-size: 22px;

      min-width: 25px;

    }

    .contact-item strong {

      display: block;

      margin-bottom: 3px;

    }

    .contact-item span {

      color: #bbb;

      font-size: 14px;

    }


    /* =====================================================
       CONTACT FORM
    ====================================================== */

    .contact-form {

      background: white;

      padding: 30px;

      border-radius: var(--radius);

      color: #111;

    }

    .contact-form h3 {

      margin-bottom: 18px;

      font-size: 23px;

    }

    .form-group {
      margin-bottom: 13px;
    }

    .form-group input,
    .form-group textarea,
    .form-group select {

      width: 100%;

      border: 1px solid #ddd;

      padding: 13px;

      border-radius: 5px;

      outline: none;

      background: #fff;

    }

    .form-group input:focus,
    .form-group textarea:focus,
    .form-group select:focus {
      border-color: var(--primary);
    }

    .form-group textarea {

      min-height: 120px;

      resize: vertical;

    }

    .form-submit {

      width: 100%;

      border: none;

      cursor: pointer;

    }


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

    footer {

      background: #080808;

      color: #999;

      padding: 25px 0;

      text-align: center;

      font-size: 13px;

    }

    footer strong {
      color: #fff;
    }

    .footer-ruc {

      display: block;

      margin-top: 5px;

      color: #777;

      font-size: 12px;

    }
.whatsapp-icon {
  font-size: 23px;
  margin-right: 9px;
  line-height: 1;
}

    /* =====================================================
       WHATSAPP FLOAT
    ====================================================== */

    .whatsapp-float {
  position: fixed;

  width: 62px;
  height: 62px;

  right: 22px;
  bottom: 22px;

  background: #25d366;
  color: #fff;

  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 34px;

  box-shadow:
    0 5px 20px rgba(0, 0, 0, .25);

  z-index: 2000;

  transition: .3s;

  text-decoration: none;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  background: #1ebe5d;
}

.whatsapp-float i {
  line-height: 1;
}

    /* =====================================================
       RESPONSIVE - 1100
    ====================================================== */

    @media (max-width: 1100px) {

      .nav-menu {
        gap: 10px;
      }

      .nav-menu a {
        font-size: 10px;
      }

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

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

    }


    /* =====================================================
       RESPONSIVE - 900
    ====================================================== */

    @media (max-width: 900px) {

      .nav-menu {
        display: none;
      }

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

      .stat {
        border-right: 0;
        border-bottom:
          1px solid rgba(255, 255, 255, .2);
      }

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

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

      .cta-content {

        flex-direction: column;

        align-items: flex-start;

      }

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

      .gold-grid {

        grid-template-columns: 1fr;

        gap: 35px;

      }

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

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

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

    }


    /* =====================================================
       RESPONSIVE - MOBILE
    ====================================================== */

    @media (max-width: 600px) {

      .container {
        width: min(100% - 28px, 1150px);
      }

      .topbar-content {

        justify-content: center;

        text-align: center;

      }

      .topbar-address {
        display: none;
      }

      .hero {

        min-height: 520px;

      }

      .hero-content {
        padding: 50px 0;
      }

      .hero-tag {
        font-size: 10px;
      }

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

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

      section {
        padding: 45px 0;
      }

      .services-grid,
      .category-grid,
      .gallery {
        grid-template-columns: 1fr;
      }

      .gallery-item {
        height: 250px;
      }

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

      .stat strong {
        font-size: 23px;
      }

      .stat span {
        font-size: 10px;
      }

      .contact-form {
        padding: 24px;
      }

      .gold-list {
        grid-template-columns: 1fr;
      }

      .gold-card {
        padding: 32px 22px;
      }

      .buttons {
        flex-direction: column;
        align-items: stretch;
      }

      .buttons .btn {
        width: 100%;
      }

      .whatsapp-float {
    width: 56px;
    height: 56px;

    right: 16px;
    bottom: 16px;

    font-size: 30px;
  }

      .experience-card {
        padding: 28px 22px;
      }

      .company-card {
        padding: 25px 18px;
      }

      .company-list {
        grid-template-columns: 1fr;
      }

      .gallery-controls {
        gap: 12px;
      }

      .gallery-btn {

        width: 42px;

        height: 42px;

      }

      .lightbox {

        padding: 20px;

      }

      .lightbox-image {

        max-width: 94vw;

        max-height: 75vh;

      }

      .lightbox-prev,
      .lightbox-next {

        width: 45px;

        height: 45px;

        font-size: 28px;

      }

      .lightbox-prev {
        left: 8px;
      }

      .lightbox-next {
        right: 8px;
      }

      .lightbox-close {

        top: 12px;

        right: 12px;

      }

    }