/* Definición de la tipografia y paleta de colores */
/* ver 20260115 */

/* init.css - Actualización para Numeraconex */

@import url('https://fonts.googleapis.com/css2?family=Miranda+Sans:ital,wght@0,400..700;1,400..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Quicksand:wght@300..700&display=swap');

:root {
    
    --primary-color: #0100FE;          /* Teal principal */
    --secondary-color: #B7C9E2;        /* Dark teal */
    --accent-color: #FFC61B;           /* Naranja vibrante CTA */
    --accent-color-hover: #E0A800;     /* Hover más oscuro */
    
    --light-bg: #B7C9E2;               /* Fondo claro */
    --dark-bg: #0F2523;                /* Muy oscuro para contraste */

    /* Tipografías */
    --title-font-family: "Miranda Sans", sans-serif;
    --base-font-family: "Quicksand", sans-serif;
    --button-font-family: 'Montserrat', sans-serif;
}

/* Gradiente global para overlays (hero, etc.) */
.gradient-teal-orange {
    background: linear-gradient(135deg, #619CBA 0%, #FFC61B 100%);
}
/*---------------------------------------------------------------------------*/
/* Elementos HTML */
  /* ver 20260115 - inicial */
  body {
      display: flex;
      flex: 1;
      flex-direction: column;
      min-height: 100vh;

      font-family: var(--base-font-family);
      font-size: 22px;
      font-weight: 500;
      font-optical-sizing: auto;
      font-style: normal;
      line-height: 1.25;
      
      background-color: lightgray;
      color: #333;

      
      
  }

  h1, h2, h3, h4 {
      font-family: var(--title-font-family);
      font-optical-sizing: auto;
      font-style: normal;
      font-weight: 800;
      color: var(--primary-color);
  }
h1 {
  font-size: 4rem;
  padding: 1rem;
  padding-bottom: 2rem;
}
h2 {

  font-size: 4rem ;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 600;
  padding-top: 0.8rem;
}
h3 {
  font-family: var(--base-font-family);
  font-size: 1.5rem ;    
  font-weight: 800;
}

  /* Texto general */
  p,
  li {
      font-family: var(--base-font-family); 
  }

  p {
    
    text-indent: .8rem;
    padding: 0.8rem;
    
    font-weight: 500;

  }


@media (max-width: 768px) {
  h1 {
    font-size: 1.5rem;
  }
  h2 {
    font-size: 0.9rem;
  }
  h3 {
    font-size: 0.8rem;
  }
}
  /* END: Elementos HTML */
/*---------------------------------------------------------------------------*/

.section {
    padding: 120px 20px 100px;
    background: #ffffff;
}
.section-title {
  width: 100%;
  font-size: clamp(1.95rem, 4.2vw, 2.75rem);
  line-height: 1.1;
  margin-bottom: 16px;
  color: var(--primary-color);
  text-align: center;
}
.section-subtitle {
  font-size: clamp(1.25rem, 3vw, 1.55rem); 
  font-family: var(--base-font-family);
  color: #333;
  margin-bottom: 40px;
  font-weight: 600;
  text-align: center;
  width: 100%;
}

@media (max-width: 576px) {
    .section {
        padding: 80px 16px 70px;
    }
}
/*---------------------------------------------------------------------------*/
/* Buttons collection -  (Pedir, Comprar, Whatsapp, etc.) */
	/* ver 20260115 - inicial */

    .cta-primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.8rem;
      
      padding: 1rem 2.2rem;
      min-width: 180px;
      
      font-family: var(--button-font-family); 
      font-size: 1.1rem;
      font-weight: 700;
      line-height: 1.4;
      
      color: white;
      background-color: var(--primary-color);
      border: 2px solid white;
      border-radius: 50px;
      
      text-decoration: none;
      cursor: pointer;
      transition: all 0.3s ease;
      
      /* Sombra sutil permanente para dar sensación de elevación */
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    }

    /* Hover y focus - efectos más notorios */
    .cta-primary:hover,
    .cta-primary:focus {
      transform: translateY(-4px);
      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
      background-color: var(--accent-color-hover, var(--accent-color));
      outline: none;
    }

    /* Estado activo (click) */
    .cta-primary:active {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    /* Botón Secundario - Acción secundaria (Ver más, Catálogo, Contacto, etc.) */
    .cta-secondary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.8rem;
      
      padding: 1rem 2.2rem;
      min-width: 180px;
      
      font-family: var(--button-font-family, var(--base-font-family));
      font-size: 1.1rem;
      font-weight: 600;
      line-height: 1.4;
      
      color: var(--primary-color);
      background-color: #FFFFFF;
      opacity: 0.7;
      border: 2px solid var(--primary-color);
      border-radius: 50px;
      
      text-decoration: none;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    /* Hover y focus */
    .cta-secondary:hover,
    .cta-secondary:focus {
      background-color: var(--secondary-color);
      color: white;
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
      outline: none;
    }

    /* Activo */
    .cta-secondary:active {
      transform: translateY(-1px);
    }

    /* Responsive - Ajustes para móviles */
    @media (max-width: 768px) {
      .cta-primary,
      .cta-secondary {
        padding: 0.95rem 2rem;
        font-size: 1rem;
        
      }
    }

    @media (max-width: 480px) {
      .cta-primary,
      .cta-secondary {
        padding: 0.9rem 1.8rem;
        font-size: 0.98rem;
        border-radius: 12px;       /* Bordes más suaves en pantallas pequeñas */
      }

  /* Botón WhatsApp específico - Siempre verde, glow sutil */
  .btn-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 1rem 2.2rem;
    min-width: 180px;
    
    font-family: var(--button-font-family);
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    
    background-color: #25D366;                  /* Verde WhatsApp oficial */
    border-radius: 50px;
    border: none;
    
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3); /* Glow verde permanente sutil */
    transition: all 0.3s ease;
  }

  .btn-whatsapp:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(37, 211, 102, 0.45); /* Glow más fuerte al hover */
    background-color: #20b358; /* Verde un poco más oscuro para contraste */
  }

  .btn-whatsapp i {
    font-size: 1.4rem;
  }

  /* Variante pequeña para cards con poco espacio */
  .btn-whatsapp--small {
    padding: 0.8rem 1.6rem;
    font-size: 1rem;
    min-width: 140px;
  }


  /* END: buttons collections */
/*---------------------------------------------------------------------------*/



#about {
    background: #f8f9fa;           /* Gris muy suave */
}

.about-section {
    padding: 100px 0;
}

.about-section:nth-child(even) {
    background: #ffffff;
}

.about-section:nth-child(odd) {
    background: #f8f9fa;
}

/* Estructura sugerida */
#about {
    background: #f8f9fa;
}

.hero-about {
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('./img/factory-hero.jpg');
    background-size: cover;
    height: 70vh;
    color: white;
}

/* Alternar fondos en secciones */
.mission-section, .values-section { background: #ffffff; }
.vision-section, .staff-section { background: #f8f9fa; }