/* 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=Raleway:wght@700;800&display=swap');

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

    /* Tipografías */
    --title-font-family: 'Montserrat', 'Raleway', sans-serif;  /* Foda fallback a Montserrat bold */
    --base-font-family: 'Raleway', sans-serif;
    --button-font-family: 'Raleway', 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 {
      font-family: var(--base-font-family);
      font-optical-sizing: auto;
      font-style: normal;
      font-size: 18px;
      line-height: 1.25;
      background-color: lightgray;
      color: #333;
      padding-top: 80px; /* Espacio para navbar fijo */
      
      display: flex;
      flex-direction: column;
      min-height: 100vh;

      font-size: 22px;
      font-weight: 500;
  }

  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: 3rem;
  padding: 1rem;
  padding-bottom: 2rem;
}
h2 {
  font-size: 2rem ;
  padding-top: 0.8rem;
}

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

  p {
    
    text-indent: 1rem;
    padding: 0.8rem;
    text-align: justify;
    text-justify: inter-character;

    font-weight: 500;

  }
  /* END: Elementos HTML */
/*---------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------*/
/* Buttons collection -  (Pedir, Comprar, Whatsapp, etc.) */
	/* ver 20260115 - inicial */

    .btn-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 */
    .btn-primary:hover,
    .btn-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) */
    .btn-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.) */
    .btn-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(--secondary-color);
      background-color: #FFFFFF;
      opacity: 0.7;
      border: 2px solid var(--secondary-color);
      border-radius: 50px;
      
      text-decoration: none;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    /* Hover y focus */
    .btn-secondary:hover,
    .btn-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 */
    .btn-secondary:active {
      transform: translateY(-1px);
    }

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

    @media (max-width: 480px) {
      .btn-primary,
      .btn-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 */
/*---------------------------------------------------------------------------*/