    /* General Styles */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #016172;
    }

    /******   M E N U ***********************/

    /* Navbar Styles */
    nav {
      background-color: #2c3e50;
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      font-family: 'Cinzel', serif;
    }

    .navbar-content {
      display: flex;
      align-items: center;
      gap: 20px;
    }

    nav img {
      height: 40px;
    }

    nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      gap: 20px;
    }

    nav ul li {
      position: relative;
    }

    nav ul li a {
      color: #fff;
      text-decoration: none;
      font-size: 1.2em;
      padding: 5px 10px;
      display: block;
    }

    nav ul li a:hover {
      background-color: #005f91;
      border-radius: 5px;
    }

    /* Submenu Styles */
    nav ul li ul {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      background-color: #0078c1;
      border-radius: 5px;
      padding: 10px 0;
      list-style: none;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      z-index: 1000;
      min-width: 200px;
    }

    nav ul li ul li {
      margin: 0;
      padding: 0;
    }

    nav ul li ul li a {
      font-size: 1em;
      padding: 10px 15px;
    }

    nav ul li ul li a:hover {
      background-color: #005f91;
    }

    nav ul li:hover ul {
      display: block;
    }



    /* Styles for First Section -------- SOBRE NOSOTROS ------------*/
    .container {
      max-width: 1200px;
      margin: 20px auto;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      padding: 20px;
      overflow: hidden;
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }

    .header {
      width: 100%;
      background: #fff;
      padding: 20px;
      text-align: center;
      border-bottom: 1px solid #ddd;
    }

    .header h2 {
      color: #0078c1;
      margin: 0;
      font-size: 2.2em;
    }

    .text-section {
      padding: 20px;
      flex: 1;
    }

    .text-section h3 {
      color: #0078c1;
      margin-bottom: 10px;
    }

    .text-section p {
      margin: 10px 0;
      line-height: 1.6;
      color: #333;
    }

    .text-section ul {
      list-style-type: disc;
      margin-left: 20px;
    }

    .text-section ul li {
      margin-bottom: 15px;
    }

    .image-section {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .image-section img {
      width: 100%;
      height: auto;
      object-fit: cover;
    }

    /*********************** Styles for Second Section ****************--- COMERCIALIZACION DE MINERALES *******/

    .minerales-section {
      max-width: 1200px;
      margin: 20px auto;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      padding: 20px;
      overflow: hidden;
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }

    .minerales-header {
      width: 100%;
      text-align: center;
      margin-bottom: 20px;
    }

    .minerales-header h2 {
      color: #0078c1;
      margin: 0;
      font-size: 2.2em;
    }

    .minerales-text {
      flex: 1;
    }

    .minerales-text p {
      line-height: 1.6;
      margin: 10px 0;
    }

    .minerales-items {
      display: flex;
      gap: 20px;
      margin-top: 20px;
    }

    .mineral-item {
      text-align: center;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 8px;
      flex: 1;
      background: #f9f9f9;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .mineral-item img {
      width: 100%;
      max-width: 100px;
      margin-bottom: 10px;
    }

    .mineral-item h4 {
      margin: 0;
      color: #0078c1;
    }

    /***********************  PRIMERA SECCION  banner ****************/
    .hero-section {
      max-width: 1200px;
      /* Define el ancho máximo de la sección */
      margin: 5px auto;
      /* Centra la sección horizontalmente y añade márgenes verticales */
      background: #fff;
      /* Establece un color de fondo blanco (esto puede no ser visible con la imagen de fondo) */
      border-radius: 8px;
      /* Redondea las esquinas de la sección */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      /* Añade una sombra para dar un efecto de elevación */
      padding: 20px;
      /* Añade espacio interno dentro de la sección */
      overflow: hidden;
      /* Oculta cualquier contenido que se salga de los límites del contenedor */
      display: flex;
      /* Define un contenedor flexible para organizar los elementos internos */
      flex-wrap: wrap;
      /* Permite que los elementos se ajusten a la siguiente línea si es necesario */
      gap: 20px;
      /* Añade espacio entre los elementos internos */
      background: url('imagenes/hero.jpg') no-repeat center center/cover;
      /* Establece una imagen como fondo, centrada y escalada para cubrir la sección */
      text-align: center;
      /* Centra horizontalmente el texto dentro de la sección */
    }

    .hero-text h1 {
      background-color: #1d78e158;
      color: #4ece0e;
      margin: 0 0 10px 0;
      font-size: 4em;
    }

    .hero-text p {
      background-color: #0606066f;
      font-weight: bold;
      color: #eeeb2a;
      font-size: 1.2em;
    }

    .hero-text {
      flex: 1;
      padding: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    /*********************** SECCION CONTACTENOS  ********************/
    .contact-section {
      max-width: 1200px;
      margin: 20px auto;
      /* espaciado desde el borde hacia afuera*/
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      padding: 20px;
      display: flex;
      justify-content: center;
    }

    .contact-inner {
      max-width: 700px;
      width: 100%;

    }

    .contact-header {
      text-align: center;
      margin-bottom: 20px;
    }

    .contact-header h2 {
      color: #0078c1;
      margin: 0;
      font-size: 2.2em;
    }

    .contact-form label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
      font-size: 1.2em;

    }

    .contact-form input,
    .contact-form textarea {
      width: 90%;
      padding: 10px;
      margin-bottom: 15px;
      border: 1px solid #ddd;
      border-radius: 4px;
      font-size: 1.1em;
    }

    .contact-form textarea {
      resize: vertical;
    }

    .contact-form button {
      background: #0078c1;
      color: #fff;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      font-size: 1em;
      cursor: pointer;
      font-weight: bold;

    }

    .contact-form button:hover {
      background: #005f91;
    }

    /********************* Datos de contacto ubigeo ***********************************/

    .ubigeo-section {
      max-width: 1200px;
      margin: 20px auto;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      padding: 20px;


    }

    .ubigeo-section .ubigeo-header {
      text-align: center;
      margin-bottom: 20px;

    }

    .ubigeo-section .ubigeo-header h2 {
      color: #0078c1;
      margin: 0;
      font-size: 2.2em;
    }

    .ubigeo-section .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
    }

    .ubigeo-section .grid-item {
      background: #f9f9f9;
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 15px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .ubigeo-section .grid-item h3 {
      color: #0078c1;
      margin-top: 0;
    }

    .ubigeo-section .grid-item a {
      color: #0078c1;
      text-decoration: none;
    }

    .ubigeo-section .grid-item a:hover {
      text-decoration: underline;
    }

    .ubigeo-section .map {
      margin-top: 20px;
      border: none;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .ubigeo-section .map iframe {
      width: 100%;
      height: 300px;
      border: none;
    }

    /****************************  enlaces de interes   *************************/

    .links-section {
      max-width: 1200px;
      margin: 40px auto;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      padding: 20px;
    }

    .links-section .links-header {
      text-align: center;
      margin-bottom: 20px;
    }

    .links-section .links-header h2 {
      color: #0078c1;
      margin: 0;
      font-size: 2.2em;
    }

    .links-section .links-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
    }

    .links-section .links-grid-item {
      background: #f9f9f9;
      border: 1px solid #ddd;
      border-radius: 8px;
      text-align: center;
      padding: 15px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .links-section .links-grid-item img {
      max-width: 100%;
      height: auto;
      margin-bottom: 10px;
    }

    .links-section .links-grid-item a {
      color: #0078c1;
      text-decoration: none;
      font-weight: bold;
    }

    .links-section .links-grid-item a:hover {
      text-decoration: underline;
    }

    /****************************** CONVERSIONES ************************************/

    .conversion-section {
      max-width: 1200px;
      margin: 40px auto;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      padding: 20px;
      display: flex;
      justify-content: center;
    }

    .conversion-section .contenedorinterno-conversion {

      max-width: 700px;
      width: 100%;
    }

    .conversion-section .conversiones-header {
      text-align: center;
      margin-bottom: 20px;
    }

    .conversion-section .conversiones-header h2 {
      color: #0078c1;
      margin: 0;
      font-size: 2.2em;
    }

    .conversion-section .conversion-box {
      background: #f4f9fc;
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .conversion-section .conversion-box h3 {
      color: #0078c1;
      margin-top: 0;
    }

    .conversion-section .conversion-box label {
      display: block;
      margin-bottom: 10px;
      font-weight: bold;
    }

    .conversion-section .conversion-box input {
      width: 40%;
      padding: 10px;
      margin-bottom: 15px;
      border: 1px solid #ddd;
      border-radius: 4px;
      font-size: 1em;
    }

    .conversion-section .conversion-box button {
      background: #0078c1;
      color: #fff;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      font-size: 1em;
      cursor: pointer;
    }

    .conversion-section .conversion-box button:hover {
      background: #005f91;
    }

    /********************* VALORIZACION ***************************/

    /* Section Styles - Valorización */
    .valorization-section {
      max-width: 1200px;
      margin: 40px auto;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      padding: 20px;
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }

    .valorization-section .form-container {
      flex: 1;
      min-width: 300px;
      background: #f4f9fc;
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .valorization-section .form-container h3 {
      color: #0078c1;
      margin-top: 0;
      font-size: 2em;
    }

    .valorization-section .form-container label {
      display: block;
      margin-bottom: 10px;
      font-weight: bold;
    }

    .valorization-section .form-container input,
    .valorization-section .form-container select,
    .valorization-section .form-container textarea {
      width: 100%;
      padding: 10px;
      margin-bottom: 15px;
      border: 1px solid #ddd;
      border-radius: 4px;
      font-size: 1em;
    }

    .valorization-section .form-container textarea {
      resize: vertical;
      height: 100px;
    }

    .valorization-section .form-container button {
      background: #0078c1;
      color: #fff;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      font-size: 1em;
      cursor: pointer;
    }

    .valorization-section .form-container button:hover {
      background: #005f91;
    }

    .valorization-section .info-container {
      flex: 1;
      min-width: 300px;

      text-align: center;
    }

    .valorization-section .info-container h3 {
      flex: 1;
      min-width: 300px;
      color: #0078c1;
      text-align: center;
      font-size: 2.2em;
    }

    .valorization-section .info-container img {
      max-width: 100%;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    /************************* Mobile Styles **********************/

    @media (max-width: 768px) {
      .container {
        flex-direction: column;
      }

      .image-section {
        height: 300px;
      }

      .minerales-items {
        flex-direction: column;
      }
    }


    /* ******************************   Back to Top Button *******************************/
    .back-to-top {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background-color: #0078c1;
      color: white;
      border: none;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      font-size: 1.5em;
      cursor: pointer;
      display: none;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .back-to-top:hover {
      background-color: #005f91;
    }
    
    /**************parche****************/
    /* === Parche responsive mínimo === */
@media (max-width: 768px) {
    /* Botón hamburguesa visible solo en móvil */
      .menu-toggle { 
    margin-left: auto; 
    background: transparent; 
    border: 2px solid #fff; 
    color: #fff; 
    padding: 6px 10px; 
    border-radius: 6px; 
    font-size: 1.1rem; 
    cursor: pointer; 
  }
      /* Menú colapsado por defecto */
  nav ul { display: none; width: 100%; }
  nav.open ul { display: flex; flex-direction: column; }
    
  /* 2.1 Nav: permitir salto de línea y evitar desbordes */
  .navbar-content { flex-wrap: wrap; }
  nav ul { flex-wrap: wrap; gap: 10px; }
  nav img { height: 32px; }

  /* 2.2 Submenús: que no se salgan de la pantalla */
  nav ul li { width: 100%; }
  nav ul li ul {
    position: static;       /* en móvil, sin posición absoluta */
    box-shadow: none;
    min-width: auto;
    padding: 6px 0;
  }

  /* 2.3 Hero: tipografía fluida para no romper layout */
  .hero-text h1 { font-size: clamp(1.8rem, 6vw, 3rem); }
  .hero-text p  { font-size: clamp(0.95rem, 3.8vw, 1.1rem); }

  /* 2.4 Imágenes y cajas */
  .image-section { height: auto; }
  .image-section img { max-height: 260px; object-fit: cover; }

  /* 2.5 Formularios y conversiones */
  .contact-form input,
  .contact-form textarea { width: 100%; }
  .conversion-section .conversion-box input { width: 100%; }

  /* 2.6 Tarjetas de minerales en columna (más aire) */
  .minerales-items { flex-direction: column; gap: 12px; }
}

/* === Parche responsive específico === */
@media (max-width: 768px) {
  /* 1) Menú: permitir salto de línea para que no “empuje” el banner */
  .navbar-content { flex-wrap: wrap; }           /* nav ya es flex, solo dejamos que rompa línea */

  /* 2) Banner: tipografía fluida; evita desbordes del H1 verde */
  .hero-text h1 { font-size: clamp(1.8rem, 6vw, 3rem); }  /* antes: 4em */

  /* 3) Secciones con imagen + texto: apilar en columna */
  .container,
  .minerales-section { flex-direction: column; } /* sobre-nosotros y comercialización */
  .image-section { height: auto; }
  .image-section img { max-height: 260px; object-fit: cover; } /* evita imágenes desproporcionadas */

  /* 4) Tarjetas de minerales: una por fila con respiro adecuado */
  .minerales-items { flex-direction: column; gap: 12px; }

  /* 5) Conversiones: campos a ancho completo */
  .conversion-section .conversion-box input { width: 100%; }  /* antes: 40% */
}




/* ==== Parche anti-desbordes y tipografía móvil ==== */
* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }

/* Nav: que nunca mida más que la pantalla y pueda romper línea */
nav, .navbar, .navbar-content { max-width: 100vw; }
nav ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }

/* Banner/hero: imagen y título fluidos */
.hero, .hero-section, .image-section { height: auto !important; }
.hero img, .hero-section img, .image-section img { width: 100%; height: auto; display: block; }
.hero-text h1 { font-size: clamp(1.6rem, 6vw, 2.6rem); line-height: 1.15; }
.hero-text p  { font-size: clamp(0.95rem, 3.6vw, 1.1rem); }

/* Columnas lado a lado -> columna en móvil */
@media (max-width: 768px) {
  .container, .minerales-section { flex-direction: column !important; }
  .minerales-items { flex-direction: column; gap: 12px; }
  /* Formularios */
  .conversion-section .conversion-box input,
  .contact-form input, .contact-form textarea { width: 100% !important; }
  /* Menú: evita que se “expanda” a la derecha */
  nav { overflow: hidden; }
}

/* Menú colapsado por defecto en móvil (sin JS) */
@media (max-width: 768px) {
  nav ul { display: none; }     /* oculta opciones largas que causan overflow */
}
/* En pantallas ≥769px vuelve a mostrarse */
@media (min-width: 769px) {
  nav ul { display: flex; }
}


/* ===== Anti-overflow global ===== */
*{ box-sizing:border-box }
html,body{ max-width:100%; overflow-x:hidden }

/* ===== Banner / hero ===== */
.hero, .hero-section, .image-section{ height:auto !important }
.hero img, .hero-section img, .image-section img{ width:100%; height:auto; display:block }

/* Caja del título del banner (verde) más contenida */
.hero-text{
  max-width: 88vw;              /* que no exceda pantalla */
  margin: 0 auto;               /* centrado en móvil */
  padding: 8px 12px;
}
.hero-text h1{
  font-size: clamp(1.6rem, 6vw, 2.6rem);  /* antes era ~4em */
  line-height: 1.15;
}

/* ===== Navegación ===== */
.navbar-content{ display:flex; align-items:center; justify-content:space-between; max-width:100vw }
nav ul{ display:flex; gap:18px; margin:0; padding:0; list-style:none; }
nav ul li a{ text-decoration:none }

/* ===== Colapso real del menú en móvil ===== */
.menu-toggle{ display:none }  /* oculto en desktop */

@media (max-width: 768px){
  .menu-toggle{
    display:inline-block;
    margin-left:auto;
    background:transparent;
    border:2px solid #fff;
    color:#fff;
    padding:6px 10px;
    border-radius:6px;
    font-size:1.1rem;
  }
  /* El problema del overflow: ocultamos el UL por defecto y lo mostramos en columna al abrir */
  nav ul{ display:none; width:100%; }
  nav.open ul{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:10px 0;
  }

  /* Reducimos tamaño y rellenos del menú para que no se “expanda” */
  nav ul li a{
    display:block;
    font-size: 1rem;        /* más pequeño en móvil */
    padding: 8px 10px;
  }

  /* Submenús: integrados al flujo para evitar desbordes */
  nav ul li ul{
    position: static !important;
    box-shadow: none !important;
    min-width: auto !important;
    padding: 6px 0;
    display: none; /* se abrirán por toque */
  }

  /* Secciones en dos columnas -> columna única */
  .container, .minerales-section{ flex-direction:column !important }
  .minerales-items{ flex-direction:column; gap:12px }

  /* Formularios y conversiones a ancho completo */
  .contact-form input, .contact-form textarea,
  .conversion-section .conversion-box input{ width:100% !important }
}


/* === Botón y colapso real del menú en móvil === */
.menu-toggle{ display:none; }

@media (max-width: 768px){
  .menu-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; border:2px solid #fff; border-radius:8px;
    background:transparent; color:#fff; cursor:pointer; margin-left:auto; z-index:5;
  }

  /* Lista principal: oculta por defecto, visible cuando nav tiene .open */
  nav ul{ display:none; width:100%; margin:0; padding:8px 0; list-style:none; }
  nav.open ul{ display:flex; flex-direction:column; gap:8px; }

  /* Submenús integrados al flujo; se abren con clase .open en el <li> */
  nav ul li ul{ position:static; display:none; padding-left:12px; box-shadow:none; }
  nav ul li.open > ul{ display:block; }
}





/* === Menú móvil definitivo === */
.menu-toggle{ display:none; }

@media (max-width: 768px){
  .menu-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; border:2px solid #fff; border-radius:8px;
    background:transparent; color:#fff; cursor:pointer; margin-left:auto; z-index:5;
  }

  /* Menú cerrado por defecto */
  nav ul{ display:none; width:100%; margin:0; padding:8px 0; list-style:none; }

  /* Menú abierto (el botón añade .open a <nav>) */
  nav.open ul{ display:flex !important; flex-direction:column; gap:8px; }

  /* Submenús por toque */
  nav ul li ul{ position:static; display:none; padding-left:12px; box-shadow:none; }
  nav ul li.open > ul{ display:block; }
}

/* === Hotfix móvil no intrusivo (no cambia colores) === */
@media (max-width:768px){
  .menu-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;border:2px solid currentColor;border-radius:8px;
    background:transparent;color:inherit;cursor:pointer;margin-left:auto;z-index:5
  }
  /* Menú cerrado por defecto y alineado a la izquierda al abrir */
  nav > .navbar-content > ul{display:none !important;width:100%;margin:0;padding:8px 0;list-style:none}
  nav.open > .navbar-content > ul{display:flex !important;flex-direction:column;gap:8px;align-items:flex-start}
  nav ul li a{display:block;text-align:left;padding:8px 10px}

  /* Submenús: SIEMPRE colapsados por defecto; se abren solo con .open en el <li> */
  nav ul li ul{
    position:static !important;display:none !important;min-width:auto !important;
    padding-left:12px;box-shadow:none !important;background:inherit !important
  }
  nav ul li.open > ul{display:block !important}
}
/* Desktop: garantiza hover SOLO en ≥769px */
@media (min-width:769px){
  .menu-toggle{display:none}
  nav ul li ul{display:none}
  nav ul li:hover > ul{display:block}
}
